• Mont.8.5.23

     9 images au ratio 16/9 en 1100x619px. Code déjà publié mais en unités adaptatives, plus rébarbatives: ICI

    A

    B

    C

    D

    E

    F

    G

    H

     

     

     

     

     

     

     

     

     

     

    <div style="width: 1100px; height: 619px; margin: 30px auto; border: 3px solid white; perspective: 1000; background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%);">
    <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><!--
    .bout{position:absolute; z-index:5; width:35px;font-size:35px; text-align:center; color:white; text-shadow:1px 1px black; background:rgba(0,0,0,0.5);}
    #bt1{ transform:translate(1060px,50px);}
    #bt2{transform:translate(1060px,100px);}
    #bt3{transform:translate(1060px,150px);}
    #bt4{ transform:translate(1060px,200px);}
    #bt5{transform:translate(1060px,250px);}
    #bt6{transform:translate(1060px,300px);}
    #bt7{transform:translate(1060px,350px);}
    #bt8{transform:translate(1060px,400px);}
    .flp{position:absolute; z-index:1; transition:all 1s linear 0s; width:1100px; height:619px; backface-visibility: hidden;}
    #f1{transform:translate(0px,0px) rotatey(0deg); background:url('http://ekladata.com/7SefoBk7N5m-bZ5PZTH65310MYs.jpg'); background-size:1100px 619px;}
    #f2{transform:translate(0px,0px) rotatey(-180deg); background:url('http://ekladata.com/4gcyEXcFE0R072hlAUqC6hxOIn8.jpg'); background-size:1100px 619px;}
    #f3{transform:translate(0px,0px) rotatey(-180deg); background:url('http://ekladata.com/CcdRC-XQPx1umSwhSZX4qbCrSog.jpg'); background-size:1100px 619px;}
    #f4{transform:translate(0px,0px) rotatey(-180deg); background:url('http://ekladata.com/thgwwkcUBumlAi8BQc-tQvCuJlE.jpg'); background-size:1100px 619px;}
    #f5{transform:translate(0px,0px) rotatey(-180deg); background:url('http://ekladata.com/PIovCwStmkKUuZzFxgAQXTymMtI.jpg'); background-size:1100px 619px;}
    #f6{transform:translate(0px,0px) rotatey(-180deg); background:url('http://ekladata.com/Xbbwx67xmb7LtI3sOMYxGUi_ub4.jpg'); background-size:1100px 619px;}
    #f7{transform:translate(0px,0px) rotatey(-180deg); background:url('http://ekladata.com/ptr2XGFqB0FWk9quGvWx3FEcRck.jpg'); background-size:1100px 619px;}
    #f8{transform:translate(0px,0px) rotatey(-180deg); background:url('http://ekladata.com/DRUk01u5Gj_dYjrfNDVr8__hrBI.jpg'); background-size:1100px 619px;}
    #f9{transform:translate(0px,0px) rotatey(-180deg); background:url('http://ekladata.com/V8wb8L-U31cQ9a22EYnI9EBlTZE.jpg'); background-size:1100px 619px;}

    #bt1:hover ~ #f1, #bt2:hover ~ #f1, #bt3:hover ~ #f1,#bt4:hover ~ #f1, #bt5:hover ~ #f1, #bt6:hover ~ #f1, #bt7:hover ~ #f1, #bt8:hover ~ #f1{transform:translate(0px,0px) 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(0px,0px) rotatey(0deg);}
    --></style>