Exemple 76

 Survol. 1+6 images au ratio 16/9.

<div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.1vh solid black; text-align:left; background: url('http://ekladata.com/oyy2-Sxqc3zygiZKVR4AWcJ9ek0@1152x648.jpg'); background-size: cover;">
<img id="sid1" class="sid" src="http://ekladata.com/2iySPqn7u1V-bNDvchsYn_AX0Nk.jpg">
<img id="sid2" class="sid" src="http://ekladata.com/a1VYcg5mILmojcP4iH3-iSCM1ak.jpg">
<img id="sid3" class="sid" src="http://ekladata.com/O7E_L4PyJ63GM2J2LIQyXNkLmwI.jpg">
<img id="sid4" class="sid" src="http://ekladata.com/32x1O1_DZQcZvpPS1R57xQrWVJ8.jpg">
<img id="sid5" class="sid" src="http://ekladata.com/hdTAICMAZr2Y6xpt3kJdxOPeVpY.jpg">
<img id="sid6" class="sid" src="http://ekladata.com/4wO0Vi9sEr03eUng9aVslgiKytc.jpg">
</div>
<style><!--
.sid{position:absolute; z-index:1; width:60vw; height:33.75vw;transition:all 1s linear 0s;}
#sid1{clip-path: circle(15% at 0% 0%);}
#sid2{clip-path: circle(15% at 100% 100%);}
#sid3{clip-path: circle(15% at 100% 0%);}
#sid4{clip-path: circle(15% at 0% 100%);}
#sid5{clip-path: circle(15% at 50% 0%);}
#sid6{clip-path: circle(15% at 50% 100%);}
#sid1:hover,#sid2:hover,#sid3:hover, #sid4:hover,#sid5:hover, #sid6:hover{z-index:5; clip-path: circle(100% at 50% 50%); }
--></style>