• exemple 1

    9 images en 16/9, redimensionnées dans le code en 1152x648px.

    Survol

     

     

     

     

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; text-align:left; border: 0.6vh ridge grey; background: radial-gradient(ellipse at center, #F6E3CE 0%,#F5D0A9 45%,#F5D0A9 100%);">
    <p id="cc0">Survol</p>
    <p id="cc1" class="cc">&nbsp;</p>
    <p id="cc2" class="cc">&nbsp;</p>
    <p id="cc3" class="cc">&nbsp;</p>
    <p id="cc4" class="cc">&nbsp;</p>
    <p id="cc5" class="cc">&nbsp;</p>
    <p id="cc6" class="cc">&nbsp;</p>
    <p id="cc7" class="cc">&nbsp;</p>
    <p id="cc8" class="cc">&nbsp;</p>
    </div>
    <style><!--
    #cc0{position:absolute; z-index:1; width:10vw; transform:translate(25vw,0vw); text-align:center; font-size:2vw; color:brown; text-shadow:0.1vh 0.1vh black;}
    .cc{position:absolute; width:16vw; height:9vw; border:0.4vh solid white; background-size:cover; transition:all 1.5s linear;}
    #cc1{z-index:10; background:url('http://ekladata.com/jtROyu8k4HZU3Y_oQL0bqOFm0YE@1152x648.jpg'); transform:translate(5vw,22vw); background-position:-5vw -22vw;}
    #cc2{z-index:9; background:url('http://ekladata.com/D7nVr2UUSTpuCeQbZpL10zJhCBo@1152x648.jpg'); transform:translate(10vw,19vw); background-position:-10vw -19vw;}
    #cc3{z-index:8; background:url('http://ekladata.com/nJ3DWxMUxiUvbiXENtyt0D4f0hU@1152x648.jpg'); transform:translate(15vw,16vw); background-position:-15vw -16vw;}
    #cc4{z-index:7; background:url('http://ekladata.com/-rOGwgzlTrQpkUhPAhucYaPF6HU@1152x648.jpg'); transform:translate(20vw,13vw); background-position:-20vw -13vw;}
    #cc5{z-index:6; background:url('http://ekladata.com/uB--t9w7sndg0cvRoxAMaohVS-g@1152x648.jpg'); transform:translate(25vw,11vw); background-position:-25vw -11vw;}
    #cc6{z-index:5; background:url('http://ekladata.com/OKaZgvCg3Z61cZE44W7xnCMdiYk@1152x648.jpg'); transform:translate(30vw,8vw); background-position:-30vw -8vw;}
    #cc7{z-index:4; background:url('http://ekladata.com/dhfNZUREhTF3DGBFxo5kJvlmR5A@1152x648.jpg'); transform:translate(35vw,5vw); background-position:-35vw -5vw;}
    #cc8{z-index:3; background:url('http://ekladata.com/kjv_r-YLvDkZgrC6R6hMyupVrsw@1152x648.jpg'); transform:translate(40vw,2vw); background-position:-40vw -2vw;}
    #cc1:hover,#cc2:hover,#cc3:hover,#cc4:hover,#cc5:hover,#cc6:hover,#cc7:hover,#cc8:hover{z-index:15; width:60vw; height:33.75vw; border:none; background-position:0vw 0vw; transform:translate(0vw,0vw);}
    --></style>