• 12 images horizontales

    Le survol est la commande préférée de la plupart des blogueurs/ses; elle est plus pratique si le survol se fait sur un bouton et non sur l'image proprement dite car on passe directement d'un bouton à un autre sans avoir à attendre la fin du survol précédent.

    Voici une présentation déjà proposée, je pense.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    Ne vous laissez pas décourager par la longueur du code: beaucoup de lignes répétitives, à une valeur près; chaque bouton et chaque image est placé en indépendant = 12+12; chaque bouton commandant une image particulière=12.
    Remplacez mes adresses images par les vôtres.
    Par contre, l'animation et le positionnement étant les mêmes pour chaque image, une ligne pour les 12.

    <div style="width: 60vw; height: 33.75vw; margin: 2vh auto; background: url('http://ekladata.com/OPmRdE4J_4uGrlftFxan_cVPZ08.jpg'); background-size: 60vw 33.75vw;">
    <p id="hv1" class="hv">&nbsp;</p>
    <p id="hv2" class="hv">&nbsp;</p>
    <p id="hv3" class="hv">&nbsp;</p>
    <p id="hv4" class="hv">&nbsp;</p>
    <p id="hv5" class="hv">&nbsp;</p>
    <p id="hv6" class="hv">&nbsp;</p>
    <p id="hv7" class="hv">&nbsp;</p>
    <p id="hv8" class="hv">&nbsp;</p>
    <p id="hv9" class="hv">&nbsp;</p>
    <p id="hv10" class="hv">&nbsp;</p>
    <p id="hv11" class="hv">&nbsp;</p>
    <p id="hv12" class="hv">&nbsp;</p>
    <p id="bd">&nbsp;</p>
    <p id="hw1" class="hw">&nbsp;</p>
    <p id="hw2" class="hw">&nbsp;</p>
    <p id="hw3" class="hw">&nbsp;</p>
    <p id="hw4" class="hw">&nbsp;</p>
    <p id="hw5" class="hw">&nbsp;</p>
    <p id="hw6" class="hw">&nbsp;</p>
    <p id="hw7" class="hw">&nbsp;</p>
    <p id="hw8" class="hw">&nbsp;</p>
    <p id="hw9" class="hw">&nbsp;</p>
    <p id="hw10" class="hw">&nbsp;</p>
    <p id="hw11" class="hw">&nbsp;</p>
    <p id="hw12" class="hw">&nbsp;</p>
    </div>

    <style><!--
    #bd{position:absolute; z-index:2; width:2vw; height:33.75vw; background:rgba(255,255,255,0.5); transform:translate(58vw,0vw);}
    .hv{position:absolute; z-index:15; width:1.3vw; height:1.3vw; border:0.2vh solid black; border-radius:50%; background:coral;}
    #hv1{transform:translate(58.3vw,1vw);}
    #hv2{transform:translate(58.3vw,3.5vw);}
    #hv3{transform:translate(58.3vw,6vw);}
    #hv4{transform:translate(58.3vw,8.5vw);}
    #hv5{transform:translate(58.3vw,11vw);}
    #hv6{transform:translate(58.3vw,13.5vw);}
    #hv7{transform:translate(58.3vw,16vw);}
    #hv8{transform:translate(58.3vw,18.5vw);}
    #hv9{transform:translate(58.3vw,21vw);}
    #hv10{transform:translate(58.3vw,23.5vw);}
    #hv11{transform:translate(58.3vw,26vw);}
    #hv12{transform:translate(58.3vw,28.5vw);}
    .hw{position:absolute; z-index:3;width:16vw; height:9vw; transform-origin:50% 50%; transition:all 1s linear;}
    #hw1{transform:translate(1vw,4vw) perspective(20vw) rotatey(-80deg) ; background:url('http://ekladata.com/0NghxWcNbUUDNHQEYjMDEaWLmrA.jpg'); background-size:cover;}
    #hw2{transform:translate(10vw,4vw) perspective(20vw) rotatey(80deg) ; background:url('http://ekladata.com/c2uToBKedtm2C2WIzRlVPBi7GR0.jpg'); background-size:cover;}
    #hw3{transform:translate(19vw,4vw) perspective(20vw) rotatey(-80deg) ; background:url('http://ekladata.com/l1vyrkVnCvp9YYTWbwAxF0euif0.jpg'); background-size:cover;}
    #hw4{transform:translate(28vw,4vw) perspective(20vw) rotatey(80deg) ; background:url('http://ekladata.com/GuDnZMJ9sCkMOmISaqRsJjpMqd4.jpg'); background-size:cover;}
    #hw5{transform:translate(37vw,4vw) perspective(20vw) rotatey(-80deg) ; background:url('http://ekladata.com/d7YF6VUIo8QieT93dgXngUCp8ec.jpg'); background-size:cover;}
    #hw6{transform:translate(46vw,4vw) perspective(20vw) rotatey(80deg) ; background:url('http://ekladata.com/WSqYxnNvJ_LqhDCmMpQzyjyuF4U.jpg'); background-size:cover;}
    #hw7{transform:translate(1vw,20vw) perspective(20vw) rotatey(-80deg) ; background:url('http://ekladata.com/T5gjaZmPaTkDk2p1CXqAYWgDpK0.jpg'); background-size:cover;}
    #hw8{transform:translate(10vw,20vw) perspective(20vw) rotatey(80deg) ; background:url('http://ekladata.com/bGlbo8z1_m33tvmKqoXmvyeC3Lc.jpg'); background-size:cover;}
    #hw9{transform:translate(19vw,20vw) perspective(20vw) rotatey(-80deg) ; background:url('http://ekladata.com/0NghxWcNbUUDNHQEYjMDEaWLmrA.jpg'); background-size:cover;}
    #hw10{transform:translate(28vw,20vw) perspective(20vw) rotatey(80deg) ; background:url('http://ekladata.com/Smgl-qf4Jg3zqn5qUWYjy1jnh48.jpg'); background-size:cover;}
    #hw11{transform:translate(37vw,20vw) perspective(20vw) rotatey(-80deg) ; background:url('http://ekladata.com/CvEWDFc3462epCvklDTGy7WMBcA.jpg'); background-size:cover;}
    #hw12{transform:translate(46vw,20vw) perspective(20vw) rotatey(80deg) ; background:url('http://ekladata.com/eVkYBvzhq4aCYLhpU08WdPzLwWw.jpg'); background-size:cover;}
    .hv:hover{background:lime;}
    #hv1:hover ~ #hw1,#hv2:hover ~ #hw2,#hv3:hover ~ #hw3,#hv4:hover ~ #hw4,#hv5:hover ~ #hw5,#hv6:hover ~ #hw6,#hv7:hover ~ #hw7,#hv8:hover ~ #hw8,#hv9:hover ~ #hw9,#hv10:hover ~ #hw10,#hv11:hover ~ #hw11,#hv12:hover ~ #hw12{z-index:10; width:60vw; height:33.75vw; transform:translate(0vw,0vw) perspective(200vw) rotatey(0deg) ;}
    --></style>