Montage 279

L'avantage d'un tel code est que vous pouvez modifier, dans le code et à deux endroits, largeur et hauteur pour qu'il s'adapte à vos dimensions; ex: 900px par 506px, 1000px par 562px ...

Survol. 4 images au ratio 16/9.

<div style="width:80vw; height:45vw; margin:1vh auto; text-align:left;">
<img id="vb1" class="vb" src="http://ekladata.com/dFbyadPhWXUOYwR0rW2ecqfYGak.jpg">
<img id="vb2" class="vb" src="http://ekladata.com/XrklGmdhsVuSCWfeX5WlNgCUVZY.jpg">
<img id="vb3" class="vb" src="http://ekladata.com/FKem0i4zTBV0lzFxB3U-XFKjRek.jpg">
<img id="vb4" class="vb" src="http://ekladata.com/VyaiET-06TlhlqeoQAlxn27CpIc.jpg">
</div>

<style><!--
.vb{position:absolute; z-index:1; width:80vw; height:45vw; filter:grayscale(1); transition:all 1s linear;}
#vb1{clip-path:polygon(0% 25%, 25% 0%, 50% 25%, 25% 50%);}
#vb2{clip-path:polygon(50% 25%, 75% 0%, 100% 25%, 75% 50%);}
#vb3{clip-path:polygon(50% 75%, 75% 50%, 100% 75%, 75% 100%);}
#vb4{clip-path:polygon(0% 75%, 25% 50%, 50% 75%, 25% 100%);}
#vb1:hover,#vb2:hover,#vb3:hover,#vb4:hover{z-index:5; filter:grayscale(0); clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
--></style>