Montage 253

6 images au ratio 16/9 à survoler.

La couleur de fond est ici le blanc mais vous pouvez en changer ou la remplacer par une texture.

<div style="width: 900px; height: 506px; margin: 5px auto; border: 3px ridge grey; background: white; text-align: left;">
<img id="clp1" class="clp" src="http://ekladata.com/0zxI7zL0Y9KsyZTg8YqzL-0z1Ts.jpg" alt="" />
<img id="clp2" class="clp" src="http://ekladata.com/03J0LqjswkQ_iCvSC5VoC1KmSH8.jpg" alt="" />
<img id="clp3" class="clp" src="http://ekladata.com/g-sfDA8HE_ptDlSeylkUbYqbOsg.jpg" alt="" />
<img id="clp4" class="clp" src="http://ekladata.com/22SWnpxXfjd4WIbIhX8em4XF6as.jpg" alt="" />
<img id="clp5" class="clp" src="http://ekladata.com/fWxj-EtmljG_CJSQdaNEv3OWrk8.jpg" alt="" />
<img id="clp6" class="clp" src="http://ekladata.com/QJFdv5E2w6OFDnSPewVMu_pT9OM.jpg" alt="" />
</div>
<style><!--
.clp{position:absolute; z-index:1; width:900px; height:506px; filter:grayscale(1); transition:all 1s linear, filter 1s linear 1s;}
#clp1{clip-path:polygon(5px 5px,142.5px 5px,142.5px 501px,5px 501px);}
#clp2{clip-path:polygon(155px 5px,292.5px 5px,292.5px 501px,155px 501px);}
#clp3{clip-path:polygon(305px 5px,442.5px 5px,442.5px 501px,305px 501px);}
#clp4{clip-path:polygon(455px 5px,592.5px 5px,592.5px 501px,455px 501px);}
#clp5{clip-path:polygon(605px 5px,742.5px 5px,742.5px 501px,605px 501px);}
#clp6{clip-path:polygon(755px 5px,895px 5px,895px 501px,755px 501px);}

#clp1:hover,#clp2:hover,#clp3:hover,#clp4:hover,#clp5:hover,#clp6:hover{z-index:5;clip-path:polygon(0px 0px, 900px 0px, 900px 506px, 0px 506px); filter:grayscale(0);}
--></style>