Montage 298

Survol. 5 images au ratio 16/9.

<div style="width: 900px; height: 506px; margin: 1vh auto; text-align: left;"><img id="xc1" class="xc" src="http://ekladata.com/zLMFt2-6N_g3KiGA_wh09AIIi3M.jpg" alt="" /> <img id="xc2" class="xc" src="http://ekladata.com/ihEQHEAAvoTGx9OAsJZO0JxMQUc.jpg" alt="" /> <img id="xc3" class="xc" src="http://ekladata.com/9McZVPFMWxftCtg3yzciRJi6F3g.jpg" alt="" /> <img id="xc4" class="xc" src="http://ekladata.com/keLXEsCMpHlGQ2tzRijck6k-i_4.jpg" alt="" /> <img id="xc5" class="xc" src="http://ekladata.com/blGnaCMDU0yLbZiTCBp_3FJH0Gc.jpg" alt="" /></div>
<style><!--
.xc{position:absolute; z-index:1; width:900px; height:506px; filter:grayscale(1); transition:all 1s linear 0s, filter 1s linear 1s;}
#xc1{clip-path:polygon(0% 0%, 50% 0%, 50% 0%, 0% 50%);}
#xc2{clip-path:polygon(50% 0%, 100% 0%, 100% 50%, 100% 50%);}
#xc3{clip-path:polygon(50% 100%, 100% 50%, 100% 100%, 50% 100%);}
#xc4{clip-path:polygon(0% 50%, 50% 100%, 50% 100%, 0% 100%);}
#xc5{clip-path:polygon(50% 10%, 50% 10%, 90% 50%, 50% 90%,50% 90%,10% 50%);}
#xc1:hover,#xc2:hover,#xc3:hover,#xc4:hover{z-index:5; clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); filter:grayscale(0);}
#xc5:hover{z-index:5; clip-path:polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%, 0% 50%); filter:grayscale(0);}
--></style>