• Exemple 29

    8 images au ratio 16/9, redimensionnées en 1152x648px par le code.

    Survol

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto;">
    <div style="position: absolute; z-index: 10; width: 60vw; height: 33.75vw; overflow: hidden;">
    <p id="cs0">Survol</p>
    <p id="cs1" class="cs">&nbsp;</p>
    <p id="cs2" class="cs">&nbsp;</p>
    <p id="cs3" class="cs">&nbsp;</p>
    <p id="cs4" class="cs">&nbsp;</p>
    <p id="cs5" class="cs">&nbsp;</p>
    <p id="cs6" class="cs">&nbsp;</p>
    <p id="cs7" class="cs">&nbsp;</p>
    <p id="cs8" class="cs">&nbsp;</p>
    </div>
    </div>
    <style><!--
    #cs0{position:absolute;z-index:1; width:10vw; font-size:2vw; color:coral; text-shadow:0.2vh 0.2vh black; transform:translate(30vw,2vw);}
    .cs{position:absolute; border:0.1vh solid black; box-shadow:inset -0.4vh -0.4vh 0.8vh white, inset 0.4vh 0.4vh 0.8vh black;transition:all 1s linear;}
    #cs1{z-index:10;box-sizing:border-box; width:22vw; height:22vw; background:url('http://ekladata.com/xf46Eij1dA_4YtJcZ-RanGPrgKI@1152x648.jpg'); background-position:-7vw -5.5vw; transform:translate(-7vw,5.5vw) rotate(45deg);}
    #cs2{z-index:9;box-sizing:border-box; width:18vw; height:18vw; background:url('http://ekladata.com/2oNQLpDPfCrGYnhZFMeUGGfWuf4@1152x648.jpg'); background-position:-7vw -7.5vw; transform:translate(7vw,7.5vw) rotate(45deg);}
    #cs3{z-index:8;box-sizing:border-box; width:15vw; height:15vw; background:url('http://ekladata.com/VyTn2Si5lH-k0TLAOudKVoJRgcI@1152x648.jpg'); background-position:-19vw -9vw; transform:translate(19vw,9vw) rotate(45deg);}
    #cs4{z-index:7; box-sizing:border-box; width:12vw; height:12vw; background:url('http://ekladata.com/J-5fVJp_w1kRd1utNUYOKnuScK8@1152x648.jpg'); background-position:-29vw -10.5vw; transform:translate(29vw,10.5vw) rotate(45deg);}
    #cs5{z-index:6; box-sizing:border-box; width:10vw; height:10vw; background:url('http://ekladata.com/qFaiyZbkI-4IRu_tCE_tK3N2_QE@1152x648.jpg'); background-position:-37vw -11.5vw; transform:translate(37vw,11.5vw) rotate(45deg);}
    #cs6{z-index:5; box-sizing:border-box; width:8.5vw; height:8.5vw; background:url('http://ekladata.com/NgbCMG6CM8lNAEdwR3-RSERUzqg@1152x648.jpg'); background-position:-43vw -12vw; transform:translate(43vw,12vw) rotate(45deg);}
    #cs7{z-index:4;box-sizing:border-box; width:7vw; height:7vw; background:url('http://ekladata.com/kHDzHyr1CHoyB65mKohSyuymgu0@1152x648.jpg'); background-position:-48vw -12.5vw; transform:translate(48vw,12.5vw) rotate(45deg);}
    #cs8{z-index:3; box-sizing:border-box; width:6vw; height:6vw; background:url('http://ekladata.com/19sn1tjNR-5FY2SRTAOWlbnarMw@1152x648.jpg'); background-position:-52vw -13.3vw; transform:translate(52vw,13.3vw) rotate(45deg);}
    #cs1:hover,#cs2:hover,#cs3:hover,#cs4:hover,#cs5:hover,#cs6:hover,#cs7:hover,#cs8:hover{z-index:20; width:60vw; height:33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw) rotate(0deg);}
    --></style>