Exemple 30

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

<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="qdf0">Survol</p>
<p id="qdf1" class="qdf">&nbsp;</p>
<p id="qdf2" class="qdf">&nbsp;</p>
<p id="qdf3" class="qdf">&nbsp;</p>
<p id="qdf4" class="qdf">&nbsp;</p>
<p id="qdf5" class="qdf">&nbsp;</p>
<p id="qdf6" class="qdf">&nbsp;</p>
</div>
</div>
<style><!--
#qdf0{position:absolute; z-index:1; width:10vw; font-size:2vw; color:brown; text-shadow:0.1vh 0.1vh black; transform:translate(35vw,2vw);}
.qdf{position:absolute; border:0.2vh solid black; box-shadow:inset -0.4vh -0.4vh 0.8vh white, inset 0.4vh 0.4vh 0.8vh black; background-size:60vw 33.75vw; transition:all 1s linear;}
#qdf1{z-index:7; width:20vw; height:33.75vw; border:0.1vh solid black; background:url('http://ekladata.com/AAACvHou8v8Hd2-3IdE8Mh2Tz3A@1152x648.jpg'); background-position:0vw 0vw; border-radius:0 16.75vw 16.75vw 0; transform:translate(0vw,0vw);}
#qdf2{z-index:6; width:18vw; height:28.75vw; border:0.1vh solid black; background:url('http://ekladata.com/tjqtD1RlSx79Kv_YgSvkmGc_2TA@1152x648.jpg'); background-position:-10vw -2.5vw; border-radius:0 14.7vw 14.7vw 0; transform:translate(10vw,2.5vw);}
#qdf3{z-index:5; width:15vw; height:23.75vw; border:0.1vh solid black; background:url('http://ekladata.com/VEbhl8GC_8ZDUWpV55yJLAJ0PO4@1152x648.jpg'); background-position:-19vw -5vw; border-radius:0 12vw 12vw 0; transform:translate(19vw,5vw);}
#qdf4{z-index:4; width:11vw; height:18.75vw; border:0.1vh solid black; background:url('http://ekladata.com/6CFwRkGJs64c4V4ebhjisn3NYak@1152x648.jpg'); background-position:-27vw -7.5vw; border-radius:0 9.5vw 9.5vw 0; transform:translate(27vw,7.5vw);}
#qdf5{z-index:3; width:7vw; height:13.75vw; border:0.1vh solid black; background:url('http://ekladata.com/1xSaEn8V8fn166qvNGpEDjpHZCc@1152x648.jpg'); background-position:-34vw -10vw; border-radius:0 7vw 7vw 0; transform:translate(34vw,10vw);}
#qdf6{z-index:2; width:5vw; height:8.75vw; border:0.1vh solid black; background:url('http://ekladata.com/0261c_nh5JtewR3ldA7rM9w1otI@1152x648.jpg'); background-position:-38vw -12.5vw; border-radius:0 7vw 7vw 0; transform:translate(38vw,12.5vw);}
#qdf1:hover,#qdf2:hover,#qdf3:hover,#qdf4:hover,#qdf5:hover,#qdf6:hover{z-index:10; width:60vw; height:33.75vw; border-radius:0 0 0 0; background-position:0vw 0vw; transform:translate(0vw,0vw);}
--></style>