Exemple 18

10 images au ratio 16/9, dimensionnées en 1152x648px dans la code. Survol.

<div style="width: 60vw; height: 33.75vw; border: 0.1vh solid black; text-align: left; margin: 1vh auto; background: linear-gradient(to bottom, #FAAC58 0%, #F5D0A9 100%);"><hr id="cr0" />
<p id="cr1" class="cr">&nbsp;</p>
<p id="cr2" class="cr">&nbsp;</p>
<p id="cr3" class="cr">&nbsp;</p>
<p id="cr4" class="cr">&nbsp;</p>
<p id="cr5" class="cr">&nbsp;</p>
<p id="cr1a" class="cr">&nbsp;</p>
<p id="cr2a" class="cr">&nbsp;</p>
<p id="cr3a" class="cr">&nbsp;</p>
<p id="cr4a" class="cr">&nbsp;</p>
<p id="cr5a" class="cr">&nbsp;</p>
</div>

<style><!--
#cr0{position:absolute; z-index:1; width:45vw; height:0vw; border: 0.5vh solid black; transform:translate(7.5vw,15.1vw);}
.cr{position:absolute; z-index:1; width:8vw; box-sizing:border-box; border:0.2vh solid white; box-shadow:inset -0.4vh -0.4vh 0.6vh black, inset 0.4vh 0.4vh 0.6vh white; filter:grayscale(1); transition:transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s, background 1s linear 0s, filter 1s linear 1s;}
#cr1{height:12vw; background:url('http://ekladata.com/HreITN_ivMBOGq1kkX-9_oGCioA@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-26vw -4vw; transform:translate(26vw,4vw);}
#cr2{height:10vw; background:url('http://ekladata.com/BflDDDgv_6o1WORKUHErdz9Fpcs@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-16vw -6vw; transform:translate(16vw,6vw) skew(10deg);}
#cr3{height:8vw; background:url('http://ekladata.com/0twlfVR53Hv6UFhhooxFNcBsg8w@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-6vw -8vw; transform:translate(6vw,8vw) skew(20deg);}
#cr4{height:10vw; background:url('http://ekladata.com/OKkgtbeepGxHgQ-LprSKCAuMATI@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-36vw -6vw; transform:translate(36vw,6vw) skew(-10deg);}
#cr5{height:8vw; background:url('http://ekladata.com/xIUJbKd-vzyG0-QRoUqkO1fsuxo@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-46vw -8vw; transform:translate(46vw,8vw) skew(-20deg);}

#cr1a{height:12vw; background:url('http://ekladata.com/sGGdY6iajhLyvGvvoNjO_ZB2wdg@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-26vw -16.6vw; transform:translate(26vw,16.6vw);}
#cr2a{height:10vw; background:url('http://ekladata.com/bpMvO5pDk_cvU8DP6LkCLpgfIB0@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-16vw -16.6vw; transform:translate(16vw,16.6vw) skew(-10deg);}
#cr3a{height:8vw; background:url('http://ekladata.com/_NgqDXS6XwAIdMNon4FxJoumOlU@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-6vw -16.6vw; transform:translate(6vw,16.6vw) skew(-20deg);}
#cr4a{height:10vw; background:url('http://ekladata.com/GdeFFBmz6IU-MXMXtI0w0I1l9kA@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-36vw -16.6vw; transform:translate(36vw,16.6vw) skew(10deg);}
#cr5a{height:8vw; background:url('http://ekladata.com/dvuz969eRPEJ2AX6KP9ka-YvjQ8@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-46vw -16.6vw; transform:translate(46vw,16.6vw) skew(20deg);}
#cr1:hover,#cr2:hover,#cr3:hover,#cr4:hover,#cr5:hover,#cr1a:hover,#cr2a:hover,#cr3a:hover,#cr4a:hover,#cr5a:hover{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw) skew(0deg); background-position:0vw 0vw; filter:grayscale(0);}
--></style>