Exemple 14

9 images horizontales, en 16/9

<p>&nbsp;</p>
<div style="width: 60vw; height: 33.75vw; border: 0.5vw ridge white; margin: 1vh auto; text-align: left; background: white;">
<p id="z0">Survol</p>
<p id="z1" class="zc">&nbsp;</p>
<p id="z2" class="zc">&nbsp;</p>
<p id="z3" class="zc">&nbsp;</p>
<p id="z4" class="zc">&nbsp;</p>
<p id="z5" class="zc">&nbsp;</p>
<p id="z6" class="zc">&nbsp;</p>
<p id="z7" class="zc">&nbsp;</p>
<p id="z8" class="zc">&nbsp;</p>
<p id="z9" class="zc">&nbsp;</p>
</div>

<style><!--
#z0{position:absolute; z-index:1; width:12vw; font-size:2vw; color:brown; text-shadow:0.1vh 0.1vh black; transform:translate(1vw,15.5vw);}
.zc{position:absolute; z-index:1; width:60vw; height:33.75vw; transition:all 1s linear;}
#z1{background:url('https://ekladata.com/rBSqsEh5Ll7K3oZiLWz4euxBLzM@1152x648.jpg');-webkit-clip-path: polygon(14vw 7vw, 46vw 7vw, 46vw 27vw, 14vw 27vw); clip-path: polygon(14vw 7vw, 46vw 7vw, 46vw 27vw, 14vw 27vw);}
#z2{background:url('https://ekladata.com/7ljCKA2cSz1tNhLUPqlhG1GVOTQ@1152x648.jpg');-webkit-clip-path: polygon(0.5vw 0, 29.75vw 0, 29.75vw 6.25vw, 14vw 6.25vw); clip-path: polygon(0.5vw 0, 29.5vw 0, 29.5vw 6.25vw, 14vw 6.25vw);}
#z3{background:url('https://ekladata.com/4v_ltk7iTON7R41VEPX9kfKrw5w@1152x648.jpg');-webkit-clip-path: polygon(30.25vw 0, 59.5vw 0, 46.5vw 6.25vw, 30.25vw 6.25vw); clip-path: polygon(30.25vw 0, 59.5vw 0, 46.5vw 6.25vw, 30.25vw 6.25vw);}
#z4{background:url('https://ekladata.com/uEae4l3iHzf5EWIDXlpESnkSA54@1152x648.jpg');-webkit-clip-path: polygon(46.5vw 6.75vw, 60vw 0.25vw, 60vw 15vw, 46.5vw 15vw, ); clip-path: polygon(46.5vw 6.75vw, 60vw 0.25vw, 60vw 15vw, 46.5vw 15vw);}
#z5{background:url('https://ekladata.com/U68x6WIVyqyL5_Ynol1dgZoZIfE@1152x648.jpg');-webkit-clip-path: polygon(46.5vw 19vw,60vw 19vw, 60vw 33.5vw ); clip-path: polygon(46.5vw 19vw,60vw 19vw, 60vw 33.5vw, 46.5vw 27.25vw);}
#z6{background:url('https://ekladata.com/xm-og8DFhrnxuOlL7Z9mBotyjzo@1152x648.jpg');-webkit-clip-path: polygon(30.25vw 27.75vw,46.5vw 27.75vw, 59.25vw 33.75vw); clip-path: polygon(30.25vw 27.75vw,46.5vw 27.75vw, 59.25vw 33.75vw, 30.25vw 33.75vw);}
#z7{background:url('https://ekladata.com/XcTtBiqZMWq7qDjhAFbJkZW9bGI@1152x648.jpg');-webkit-clip-path: polygon(14vw 27.75vw, 29.75vw 27.75vw, 29.75vw 33.75vw, 0.5vw 33.75vw); clip-path: polygon(14vw 27.75vw, 29.75vw 27.75vw, 29.75vw 33.75vw, 0.5vw 33.75vw);}
#z8{background:url('https://ekladata.com/_TK7WjbjvrvS49brTgA4iE8fFXM@1152x648.jpg');-webkit-clip-path: polygon(0vw 17.25vw, 13.5vw 17.25vw, 13.5vw 27.5vw, 0vw 33.5vw); clip-path: polygon(0vw 19vw, 13.5vw 19vw, 13.5vw 27.5vw, 0vw 33.5vw);}
#z9{background:url('https://ekladata.com/7KbF50_Q98rSkEOAUQI46Rn9YCQ@1152x648.jpg');-webkit-clip-path: polygon(0vw 0.25vw, 13.5vw 6.5vw, 13.5vw 15vw, 0vw 15vw); clip-path: polygon(0vw 0.25vw, 13.5vw 6.5vw, 13.5vw 15vw, 0vw 15vw);}
#z1:hover,#z2:hover,#z3:hover,#z4:hover,#z5:hover,#z6:hover,#z7:hover,#z8:hover,#z9:hover{z-index:5; -webkit-clip-path: polygon(0vw 0vw, 60vw 0vw, 60vw 33.75vw, 0vw 33.75vw); clip-path: polygon(0vw 0vw, 60vw 0vw, 60vw 33.75vw, 0vw 33.75vw);}
--></style>