Exemple 31

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

<div style="width: 60vw; height: 33.75vw; margin: 1vh auto;">
<p id="sect1" class="sect">&nbsp;</p>
<p id="sect2" class="sect">&nbsp;</p>
<p id="sect3" class="sect">&nbsp;</p>
<p id="sect4" class="sect">&nbsp;</p>
<p id="sect5" class="sect">&nbsp;</p>
<p id="sect6" class="sect">&nbsp;</p>
<p id="sect7" class="sect">&nbsp;</p>
<p id="sect8" class="sect">&nbsp;</p>
</div>
<style><!--
.sect{position:absolute; z-index:1; width:60vw; height:33.75vw; background-size:60vw 33.75vw; background-position:0vw 0vw; transition:all 1s linear;}
#sect1{background:url('http://ekladata.com/KVM3v-KYja1swBYXI3X1s9XVyBU@1152x648.jpg'); clip-path: polygon(0 0, 30% 49%, 30% 49%, 0% 49%);}
#sect2{background:url('http://ekladata.com/bJBj6evEOaDgLz2RSgJBDfL4eRA@1152x648.jpg'); clip-path: polygon(0% 51%, 30% 51%,30% 51%, 0% 100%);}
#sect3{background:url('http://ekladata.com/xM5dPz6F2kdV47IeE-BQlWlbL90@1152x648.jpg'); clip-path: polygon(1.5% 0%, 49.5% 0%, 49.5% 49%, 31.5% 49%);}
#sect4{background:url('http://ekladata.com/JZPc9Y5bTnrMkXBWB3cfK_Ub8mk@1152x648.jpg'); clip-path: polygon(50.5% 0%, 98.5% 0%, 68.5% 49%, 50.5% 49%);}
#sect5{background:url('http://ekladata.com/ecLg7-xyS-qyeGA3b7tslvtkrnM@1152x648.jpg'); clip-path: polygon(31.5% 51%, 49.5% 51%, 49.5% 100%, 1.5% 100%);}
#sect6{background:url('http://ekladata.com/f--e-eZFeKTjheQPvNcDF0BVBgs@1152x648.jpg'); clip-path: polygon(50.5% 51%, 68.5% 51%, 98.5% 100%, 50.5% 100%);}
#sect7{background:url('http://ekladata.com/X7A2pTQcut9XWkPZLXQQrnz8tBg@1152x648.jpg'); clip-path: polygon(100% 0%,100% 0%, 100% 49%, 70% 49%);}
#sect8{background:url('http://ekladata.com/RqR7jv_aPJQmJ3WnqkQAhmaKOLo@1152x648.jpg');  clip-path: polygon(70% 51%, 100% 51%,100% 100%, 100% 100%);}
#sect1:hover,#sect2:hover,#sect3:hover,#sect4:hover,#sect5:hover,#sect6:hover,#sect7:hover,#sect8:hover{z-index:5; clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);}
--></style>