• Montage 97

    9 images horizontales au ratio 16/9 avec animation.

    Clic maintenu

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.1vh solid black; background:url('http://ekladata.com/wNkeHKwBItKuSjuvzAKm4Jih--Q.jpg'); background-size:60vw 33.75vw;">
    <p id="cp0">Clic maintenu</p>
    <p id="cp1" class="cpa">&nbsp;</p>
    <p id="cp2" class="cpa">&nbsp;</p>
    <p id="cp3" class="cpa">&nbsp;</p>
    <p id="cp4" class="cpa">&nbsp;</p>
    <p id="cp5" class="cpb">&nbsp;</p>
    <p id="cp6" class="cpb">&nbsp;</p>
    <p id="cp7" class="cpb">&nbsp;</p>
    <p id="cp8" class="cpb">&nbsp;</p>
    </div>

    <style><!--
    #cp0{position:absolute; z-index:1; width:10vw; border:0.1vh solid white; font-size:1.2vw; color:white; text-shadow:0.1vh 0.1vh black; transform:translate(25vw,0.5vw);}
    .cpa{position:absolute; z-index:1; width:3vw; height:6vw; border-radius:1vw 0 0 1vw; border:0.3vh ridge white; box-shadow:-0.3vh 0.3vh 0.5vh black; transition:all 1s linear;}
    .cpb{position:absolute; z-index:1; width:3vw; height:6vw; border-radius:0 1vw 1vw 0; border:0.3vh ridge white; box-shadow:0.3vh 0.3vh 0.5vh black; transition:all 1s linear;}
    #cp1{box-sizing:border-box; background:url('http://ekladata.com/Q1rLlZWjWKqNg9QS_xnGa4QvCAg.jpg'); background-size:60vw 33.75vw; background-position:0vw -2vw; transform:translate(0vw,2vw) rotatey(180deg);}
    #cp2{box-sizing:border-box; background:url('http://ekladata.com/CwaJJmMt36bixWuThYHZHj0uJD0.jpg'); background-size:60vw 33.75vw; background-position:0vw -10vw; transform:translate(0vw,10vw) rotatey(180deg);}
    #cp3{box-sizing:border-box; background:url('http://ekladata.com/vMW6H84_8TQxy7NifPXX1ljlF7Q.jpg'); background-size:60vw 33.75vw; background-position:0vw -18vw; transform:translate(0vw,18vw) rotatey(180deg);}
    #cp4{box-sizing:border-box; background:url('http://ekladata.com/EdQ8kdTnZvaIwmiIE0K4fEp6NrI.jpg'); background-size:60vw 33.75vw; background-position:0vw -26vw; transform:translate(0vw,26vw) rotatey(180deg);}
    #cp5{box-sizing:border-box; background:url('http://ekladata.com/uGvF_Q00afvRCApS1g4q57AHSCk.jpg'); background-size:60vw 33.75vw; background-position:0vw -2vw; transform:translate(57vw,2vw) rotatey(180deg);}
    #cp6{box-sizing:border-box; background:url('http://ekladata.com/C_V70Pj_AYwkaD4YAHQZYjg3io0.jpg'); background-size:60vw 33.75vw; background-position:0vw -10vw; transform:translate(57vw,10vw) rotatey(180deg);}
    #cp7{box-sizing:border-box; background:url('http://ekladata.com/23-wB0muxxUTSRdVFKOhIMepO_o.jpg'); background-size:60vw 33.75vw; background-position:0vw -18vw; transform:translate(57vw,18vw) rotatey(180deg);}
    #cp8{box-sizing:border-box; background:url('http://ekladata.com/ceFZMOTZqM14cKhXD1sGtG_19rM.jpg'); background-size:60vw 33.75vw; background-position:0vw -26vw; transform:translate(57vw,26vw) rotatey(180deg);}
    #cp1:active,#cp2:active,#cp3:active,#cp4:active{z-index:5; width:60vw; height:33.75vw; box-shadow:none; border-radius:0; transform:translate(0vw,0vw); background-position:0vw 0vw;}
    #cp5:active,#cp6:active,#cp7:active,#cp8:active{z-index:5; width:60vw; height:33.75vw; box-shadow:none; border-radius:0; transform:translate(0vw,0vw); background-position:0vw 0vw;}
    --></style>