• Exemple 79

     8 images au ratio 16/, redimensionnées en 1152px par 648px par le code. Je reprends des unités en pixels plus lisibles pour tous.

    Survol

     

     

     

     

     

     

     

     

    <div style="width: 1152px; height: 648px; margin: 5px auto; text-align: left; border: 2px solid black; border-radius: 20%; background: url('http://ekladata.com/FG_P59Zgy9uNnXOjFJ-F4O5dGvY/4a314999.jpg'); background-size: cover;">
    <p id="gap0">Survol</p>
    <p id="gap1" class="gap">&nbsp;</p>
    <p id="gap2" class="gap">&nbsp;</p>
    <p id="gap3" class="gap">&nbsp;</p>
    <p id="gap4" class="gap">&nbsp;</p>
    <p id="gap5" class="gap">&nbsp;</p>
    <p id="gap6" class="gap">&nbsp;</p>
    <p id="gap7" class="gap">&nbsp;</p>
    <p id="gap8" class="gap">&nbsp;</p>
    </div>
    <style><!--
    #gap0{position:absolute; z-index:1; width:150px; transform:translate(500px,10px); font-size:30px; color:coral; text-shadow:2px 2px black;}
    .gap{position:absolute; z-index:1; width:250px; height:150px; border-radius:50%; box-shadow:inset -10px -10px 15px black, inset 10px 10px 15px white; filter:grayscale(1); transition:transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s, border-radius 1s linear 0s, background 1s linear 0s, filter 1s linear 1s;}
    #gap1{box-sizing:border-box; background:url('http://ekladata.com/ThVdNHtEi-abjw-xRtstHHAHih4@1152x648.jpg'); background-position:-100px -50px; transform:translate(100px,50px);}
    #gap2{box-sizing:border-box; background:url('http://ekladata.com/pbpY_RAjQBNKpQEHe3q50MnK9ts@1152x648.jpg'); background-position:-450px -50px; transform:translate(450px,50px);}
    #gap3{box-sizing:border-box; background:url('http://ekladata.com/5joWPHIL60AULDQy-pt--jZxyrk@1152x648.jpg'); background-position:-800px -50px; transform:translate(800px,50px);}
    #gap4{box-sizing:border-box; background:url('http://ekladata.com/qfsldpEhoakSb9rznJm8w21K4uA@1152x648.jpg'); background-position:-275px -250px; transform:translate(275px,250px);}
    #gap5{box-sizing:border-box; background:url('http://ekladata.com/hUMTY64lIIbc-4-aSFfy_TSgj7U@1152x648.jpg'); background-position:-625px -250px; transform:translate(625px,250px);}
    #gap6{box-sizing:border-box; background:url('http://ekladata.com/w-YQom5xAL4YgDF2bxUemXbdjGQ@1152x648.jpg'); background-position:-100px -450px; transform:translate(100px,450px);}
    #gap7{box-sizing:border-box; background:url('http://ekladata.com/nDcNwi4ioCQ4GVacZoWikux_wqo@1152x648.jpg'); background-position:-450px -450px; transform:translate(450px,450px);}
    #gap8{box-sizing:border-box; background:url('http://ekladata.com/1HDNcvjRKD6QVMGngvC9EFqTWmI@1152x648.jpg'); background-position:-800px -450px; transform:translate(800px,450px);}
    #gap1:hover,#gap2:hover,#gap3:hover,#gap4:hover,#gap5:hover,#gap6:hover,#gap7:hover,#gap8:hover{z-index:5; width:1152px; height:648px; background-position:0px 0px; transform:translate(0px,0px); border-radius:20%; filter:grayscale(0);}
    --></style>