• Flips multiples2

    9 images au ratio 16/9, redimensionnées en 1152x648px par le code. 

     

    A

    B

    C

    D

    E

    F

    G

    H

     

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 2vh auto; border: 0.3vh solid white; background: linear-gradient(to bottom, rgba(100,100,0,0.7) 0%, rgba(0,0,0,0.3) 100%);">
    <p id="bt0">&nbsp;</p>
    <p id="bt1" class="bout">A</p>
    <p id="bt2" class="bout">B</p>
    <p id="bt3" class="bout">C</p>
    <p id="bt4" class="bout">D</p>
    <p id="bt5" class="bout">E</p>
    <p id="bt6" class="bout">F</p>
    <p id="bt7" class="bout">G</p>
    <p id="bt8" class="bout">H</p>
    <p id="f1" class="flp">&nbsp;</p>
    <p id="f2" class="flp">&nbsp;</p>
    <p id="f3" class="flp">&nbsp;</p>
    <p id="f4" class="flp">&nbsp;</p>
    <p id="f5" class="flp">&nbsp;</p>
    <p id="f6" class="flp">&nbsp;</p>
    <p id="f7" class="flp">&nbsp;</p>
    <p id="f8" class="flp">&nbsp;</p>
    <p id="f9" class="flp">&nbsp;</p>
    </div>
    <style><!--
    #bt0{position:absolute; z-index:5; width:2vw; height:33.75vw; transform:translate(58vw,0vw);text-align:center;background:rgba(0,0,0,0.3);}
    .bout{position:absolute; z-index:5; width:2vw;font-size:2vw; text-align:center; color:white; text-shadow:0.1vh 0.1vh black;}
    #bt1{ transform:translate(58vw,2vw);}
    #bt2{transform:translate(58vw,5vw);}
    #bt3{transform:translate(58vw,8vw);}
    #bt4{ transform:translate(58vw,11vw);}
    #bt5{transform:translate(58vw,14vw);}
    #bt6{transform:translate(58vw,17vw);}
    #bt7{transform:translate(58vw,20vw);}
    #bt8{transform:translate(58vw,23vw);}
    .flp{position:absolute; z-index:1; transition:all 1s linear 0s; width:60vw; height:33.75vw; background-size:60vw 33.75vw; backface-visibility: hidden;}
    #f1{transform:translate(0vw,0vw) rotatey(0deg); background:url('http://ekladata.com/P32CaVnMfPDb1MZzy9s-ln_dFJI@1152x648.jpg');}
    #f2{transform:translate(0vw,0vw) rotatey(-180deg); background:url('http://ekladata.com/eJf8jm438CYE0PYeS8J7Yj2WU30@1152x648.jpg');}
    #f3{transform:translate(0vw,0vw) rotatey(-180deg); background:url('http://ekladata.com/Yr9owbt_wutdLwaYMs5murLupvs@1152x648.jpg');}
    #f4{transform:translate(0vw,0vw) rotatey(-180deg); background:url('http://ekladata.com/nADf3TNID4WRXgDvxx5Oplu3lsQ@1152x648.jpg');}
    #f5{transform:translate(0vw,0vw) rotatey(-180deg); background:url('http://ekladata.com/EOfbaj4-pJkk2TzYC4HNIBA42bY@1152x648.jpg');}
    #f6{transform:translate(0vw,0vw) rotatey(-180deg); background:url('http://ekladata.com/98kvI6eHby6GJgsjnIZ2ONJMVnM@1152x648.jpg');}
    #f7{transform:translate(0vw,0vw) rotatey(-180deg); background:url('http://ekladata.com/j-WZTdWr4VYVCrLjHnjcCyHAAlA@1152x648.jpg');}
    #f8{transform:translate(0vw,0vw) rotatey(-180deg); background:url('http://ekladata.com/Lxiqx4eibH3o7Han2crthxS1fn4@1152x648.jpg');}
    #f9{transform:translate(0vw,0vw) rotatey(-180deg); background:url('http://ekladata.com/VYyHYdAL7CWp-GwzQ1gx7PVZFxc@1152x648.jpg');}

    #bt1:hover ~ #f1, #bt2:hover ~ #f1, #bt3:hover ~ #f1,#bt4:hover ~ #f1, #bt5:hover ~ #f1, #bt6:hover ~ #f1, #bt7:hover ~ #f1, #bt8:hover ~ #f1, #bt9:hover ~ #f1{transform:translate(0vw,0vw) rotatey(180deg);}
    #bt1:hover ~ #f2,#bt2:hover ~ #f3,#bt3:hover ~ #f4,#bt4:hover ~ #f5,#bt5:hover ~ #f6,#bt6:hover ~ #f7,#bt7:hover ~ #f8,#bt8:hover ~ #f9{transform:translate(0vw,0vh) rotatey(0deg);}
    --></style>