• mardi

    Je pense avoir déjà proposé ce code mais puisque qu'une visiteuse me le demande: le voici en 60vw/69vh, soit 60% de la largeur de votre écran; j'espère que cela correspond à la largeur de votre zone article.

    Remplacez mes adresses-images en bleu, par les vôtres, quelles que soient leur dimensions mais au arion 16/9.

     

    Survolez chaque vignette.

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 69vh; margin: 1vw auto; border: 0.6vh ridge white; background: url('http://ekladata.com/IRpn3dv41rKXR3tiAycQMxD3Yeo.jpg'); background-size: 60vw 69vw;">
    <p id="z0">Survolez chaque vignette.</p>
    <p id="z1">&nbsp;</p>
    <p id="z2">&nbsp;</p>
    <p id="z3">&nbsp;</p>
    <p id="z4">&nbsp;</p>
    <p id="z5">&nbsp;</p>
    <p id="z6">&nbsp;</p>
    <p id="z7">&nbsp;</p>
    <p id="z8">&nbsp;</p>
    </div>

    <style><!--
    #z0{position:absolute; z-index:1; width:35vw; text-align:center; transform:translate(10vw,5vw); font-size:2vw; color:white; text-shadow:0.1vw 0.1vw black;}
    #z1{position:absolute; z-index:1; width:4vw; height:4vw; border:0.3vh solid white; box-shadow:0.3vh 0.3vh black; background:url('http://ekladata.com/t03dZpIbaQlTuyOZSihjHCNly-A.jpg'); background-size:60vw 69vh; background-position:0% 12%; transform:translate(0vw,5vh); transition:all 1s linear;}
    #z2{position:absolute; z-index:1; width:4vw; height:4vw; border:0.3vh solid white; box-shadow:0.3vh 0.3vh black; background:url('http://ekladata.com/GMOPvNFwjptzAX8oEEpAMX5z8KI.jpg'); background-size:60vw 69vh; background-position:0% 37%; transform:translate(0vw,20vh); transition:all 1s linear;}
    #z3{position:absolute; z-index:1; width:4vw; height:4vw; border:0.3vh solid white; box-shadow:0.3vh 0.3vh black; background:url('http://ekladata.com/l5awJ_EgPXwby1skDriGITggObQ.jpg'); background-size:60vw 69vh; background-position:0% 62%; transform:translate(0vw,35vh); transition:all 1s linear;}
    #z4{position:absolute; z-index:1; width:4vw; height:4vw; border:0.3vh solid white; box-shadow:0.3vh 0.3vh black; background:url('http://ekladata.com/1Woff4vffRSXShhujtalcaQTXSE.jpg'); background-size:60vw 69vh; background-position:0% 87%; transform:translate(0vw,50vh); transition:all 1s linear;}
    #z5{position:absolute; z-index:1; width:4vw; height:4vw; border:0.3vh solid white; box-shadow:-0.3vh 0.3vh black; background:url('http://ekladata.com/QglFiGXHMsXCgF9RneesI1gvbDU.jpg'); background-size:60vw 69vh; background-position:100% 12%; transform:translate(55.7vw,5vh); transition:all 1s linear;}
    #z6{position:absolute; z-index:1; width:4vw; height:4vw; border:0.3vh solid white; box-shadow:-0.3vh 0.3vh black; background:url('http://ekladata.com/anYS7RRMw00AK2A9_grIxu-SmoY.jpg'); background-size:60vw 69vh; background-position:100% 37%; transform:translate(55.7vw,20vh); transition:all 1s linear;}
    #z7{position:absolute; z-index:1; width:4vw; height:4vw; border:0.3vh solid white; box-shadow:-0.3vh 0.3vh black; background:url('http://ekladata.com/KQp41D3cFixGojL7Crn2GYV78Uw.jpg'); background-size:60vw 69vh; background-position:100% 62%; transform:translate(55.7vw,35vh); transition:all 1s linear;}
    #z8{position:absolute; z-index:1; width:4vw; height:4vw; border:0.3vh solid white; box-shadow:-0.3vh 0.3vh black; background:url('http://ekladata.com/niU4PTEXuaP4Hze2uG0TDbfQKSg.jpg'); background-size:60vw 69vh; background-position:100% 87%; transform:translate(55.7vw,50vh); transition:all 1s linear;}
    #z1:hover,#z2:hover,#z3:hover,#z4:hover,#z5:hover,#z6:hover,#z7:hover,#z8:hover{z-index:5;height:69vh; width:60vw; border:none; box-shadow:none;transform:translate(0vw,0vw);}
    --></style>