Montage 242

6 images au ratio 16/9.

Survol

<div style="width: 900px; height: 506px; margin: 5px auto; text-align: left;"><img id="et1" class="et" src="http://ekladata.com/vs8YJzPmPZAuWq-rBkGbr3HXrDQ.jpg" alt="" /> <img id="et2" class="et" src="http://ekladata.com/5LJ-yulDJcKH1i2ums5UJhgQbaU.jpg" alt="" /> <img id="et3" class="et" src="http://ekladata.com/xGV-OX6kM3OAy5568VAOgRQb3Kc.jpg" alt="" /> <img id="et4" class="et" src="http://ekladata.com/mpmRDJGVhykkbfrcx4ZSwn1GT-4.jpg" alt="" /> <img id="et5" class="et" src="http://ekladata.com/4VZ72uxsY91zzqeyd6DdlWYQBRw.jpg" alt="" /> <img id="et6" class="et" src="http://ekladata.com/bughKiBgCn0_pnw_elLXljgTBSY.jpg" alt="" />
<p id="trg">Survol</p>
</div>

<style><!--
#trg{position:absolute; z-index:1; width:150px; font-size:35px; color:white; text-shadow:2px 2px black; transform:translate(375px,220px);}
.et{position:absolute; z-index:1; width:900px; height:506px; transition:all 1s linear;}
#et1{clip-path:polygon(0px 100px, 250px 250px, 250px 250px, 0px 400px);}
#et2{clip-path:polygon(100px 0px, 400px 0px, 250px 250px, 250px 250px);}
#et3{clip-path:polygon(500px 0px, 800px 0px, 650px 250px, 650px 250px);}
#et4{clip-path:polygon(650px 250px, 900px 100px, 900px 400px, 650px 250px);}
#et5{clip-path:polygon(650px 250px, 650px 250px, 900px 506px, 500px 506px);}
#et6{clip-path:polygon(250px 250px, 250px 250px, 400px 506px, 100px 506px);}
#et1:hover,#et2:hover,#et3:hover,#et4:hover,#et5:hover,#et6:hover{z-index:5; clip-path:polygon(0px 0px, 900px 0px, 900px 506px, 0px 506px);}
--></style>