• Exemple 59

    8+1 images au ratio 16/9, redimensionnées en 1152x648px par le code; survol de chaque bouton. 

    L'animation est ici par changement d'opacité mais on peut la modifier.

     

     

     

     

     

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; text-align: left; border: 0.1vh solid black;">
    <p id="deb0">&nbsp;</p>
    <p id="deb1" class="deb">&nbsp;</p>
    <p id="deb2" class="deb">&nbsp;</p>
    <p id="deb3" class="deb">&nbsp;</p>
    <p id="deb4" class="deb">&nbsp;</p>
    <p id="deb5" class="deb">&nbsp;</p>
    <p id="deb6" class="deb">&nbsp;</p>
    <p id="deb7" class="deb">&nbsp;</p>
    <p id="deb8" class="deb">&nbsp;</p>
    <img id="gm0" src="http://ekladata.com/_GJ05X1sp8p6GWTPHWx_BQntdSE@1152x648.jpg" alt="" /> <img id="gm1" class="gm" src="http://ekladata.com/1gcUnuvoDXCWxQ-Kk8BbaexI8aI@1152x648.jpg" alt="" /> <img id="gm2" class="gm" src="http://ekladata.com/dnJCGd6UUvvstkUA5qGaBBFmuIw@1152x648.jpg" alt="" /> <img id="gm3" class="gm" src="http://ekladata.com/QHQYWI52k33-Qu2O3ZbL49hjXls@1152x648.jpg" alt="" /> <img id="gm4" class="gm" src="http://ekladata.com/ekrHZHZfonRv-kBUiT7ShbNdrMc@1152x648.jpg" alt="" /> <img id="gm5" class="gm" src="http://ekladata.com/pSDzEY-drQJFH84spD-SKqzhl6o@1152x648.jpg" alt="" /> <img id="gm6" class="gm" src="http://ekladata.com/A3obmwls8GMz2I5lbW5EHHHxHGU@1152x648.jpg" alt="" /> <img id="gm7" class="gm" src="http://ekladata.com/hBATFiTs2lMvt2akNi9BANcMYek@1152x648.jpg" alt="" /> <img id="gm8" class="gm" src="http://ekladata.com/MUWI-OKrz6WOrlGc_qhdZ91QM8E@1152x648.jpg" alt="" /></div>

    <style><!--
    #deb0{position:absolute; z-index:5; width:2vw; height:33.75vw; background:rgba(0,0,0,0.5); transform:translate(58vw,0vw);}
    .deb{position:absolute; z-index:5; width:1.5vw; height:1.5vw; border:0.1vh solid black; box-shadow:inset 0.3vh 0.3vh 0.5vh black; border-radius:50%; background:white;}
    #deb1{transform:translate(58.2vw,2vw);}
    #deb2{transform:translate(58.2vw,6vw);}
    #deb3{transform:translate(58.2vw,10vw);}
    #deb4{transform:translate(58.2vw,14vw);}
    #deb5{transform:translate(58.2vw,18vw);}
    #deb6{transform:translate(58.2vw,22vw);}
    #deb7{transform:translate(58.2vw,26vw);}
    #deb8{transform:translate(58.2vw,30vw);}
    #gm0{position:absolute; z-index:2; width:60vw; height:33.75vw;}
    .gm{position:absolute; z-index:1; width:60vw; height:33.75vw; opacity:0; transition:all 1s linear;}
    #deb1:hover ~ #gm1,#deb2:hover ~ #gm2,#deb3:hover ~ #gm3,#deb4:hover ~ #gm4,#deb5:hover ~ #gm5,#deb6:hover ~ #gm6,#deb7:hover ~ #gm7,#deb8:hover ~ #gm8{z-index:3; opacity:1;}
    --></style>