• Flip multiple

    Vous connaissez le code "flip", qui permet, au survol, le retournement d'une image pour en afficher une autre.

    Ce code ne concerne que 2 images et on peut être intéressé par la présentation de plusieurs images selon le même principe; voici une proposition dans ce sens: survolez chaque lettre

    Mes images sont hébergées en 1920x1080px et réduite à 60% des dimensions de l'écran de lecture, ce qui devrait mieux convenir à la majorité.

    Le nombre d'images est à votre convenance.

    A

    B

    C

    D

    E

    F

    G

    H

     

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 69vh; margin: 2vh auto; border: 0.3vh 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:2vw;font-size:2vw; text-align:center; color:white; text-shadow:0.1vh 0.1vh black;background:rgba(0,0,0,0.5);}
    #bt1{ transform:translate(58vw,5vh);}
    #bt2{transform:translate(58vw,11vh);}
    #bt3{transform:translate(58vw,16vh);}
    #bt4{ transform:translate(58vw,22vh);}
    #bt5{transform:translate(58vw,28vh);}
    #bt6{transform:translate(58vw,34vh);}
    #bt7{transform:translate(58vw,40vh);}
    #bt8{transform:translate(58vw,46vh);}
    .flp{position:absolute; z-index:1; transition:all 1s linear 0s; width:60vw; height:69vh; backface-visibility: hidden;}
    #f1{transform:translate(0px,0px) rotatey(0deg); background:url('http://ekladata.com/oor46_yjj6r8molc2-oHq1Q9cfo.jpg'); background-size:60vw 69vh;}
    #f2{transform:translate(0px,0px) rotatey(-180deg); background:url('http://ekladata.com/sLo_ndZ6QeX4MZEiwjk5PD7BeQ4.jpg'); background-size:60vw 69vh;}
    #f3{transform:translate(0px,0px) rotatey(-180deg); background:url('http://ekladata.com/hSFtP6I2EHq9FooOZXgqnzc1-lU.jpg'); background-size:60vw 69vh;}
    #f4{transform:translate(0px,0px) rotatey(-180deg); background:url('http://ekladata.com/_jqHdlpoRwhTYpIhLqdttJfAC4o.jpg'); background-size:60vw 69vh;}
    #f5{transform:translate(0px,0px) rotatey(-180deg); background:url('http://ekladata.com/iVMYjKOoR-UddkzFirGpZV9pksk.jpg'); background-size:60vw 69vh;}
    #f6{transform:translate(0px,0px) rotatey(-180deg); background:url('http://ekladata.com/TR666LDvK_sPBOYzUE3LgR2iF0s.jpg'); background-size:60vw 69vh;}
    #f7{transform:translate(0px,0px) rotatey(-180deg); background:url('http://ekladata.com/r0mosrTMzwqmmH1cAWifevggrNQ.jpg'); background-size:60vw 69vh;}
    #f8{transform:translate(0px,0px) rotatey(-180deg); background:url('http://ekladata.com/EgPG03t206UexXiWfl4kGS-f3V0.jpg'); background-size:60vw 69vh;}
    #f9{transform:translate(0px,0px) rotatey(-180deg); background:url('http://ekladata.com/V5fAwcrSn6187ERLjwg8_o5tBUA.jpg'); background-size:60vw 69vh;}

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

    Si vous modifiez les dimensions du montage, il vous faudra également ajuster le positionnement des boutons.

    Si vous modifiez le nombre de couples bouton/image, supprimez ou ajoutez des lignes de code.