Art.14.7.21

 5 images au ratio 16/9 à survoler.

*********************
<div style="width: 1000px; height: 562px; margin: 20px auto; text-align: left;"><img id="chr1" class="chr" src="http://ekladata.com/g8hjKrWDfotmx_Fx1P1nkPqRb5U@1000x562.jpg" alt="" /> <img id="chr2" class="chr" src="http://ekladata.com/I6Foq6xw2XzrRE-ftGJnyKcNtls@1000x562.jpg" alt="" /> <img id="chr3" class="chr" src="http://ekladata.com/iENXle7rc7-mws6NBryS2V-hCz8@1000x562.jpg" alt="" /> <img id="chr4" class="chr" src="http://ekladata.com/LhvsUqddwO61_G5U4n9FZbcAXCc@1000x562.jpg" alt="" /> <img id="chr5" class="chr" src="http://ekladata.com/jue-snPyi7wY2asgDb5YgHdAZJk@1000x562.jpg" alt="" /></div>

<style><!--
.chr{position:absolute; z-index:1; width:1000px; height:562px; transition:all 1s;}
#chr1{clip-path:polygon(30% 0%, 70% 0%, 50% 100%, 50% 100%);}
#chr2{clip-path:polygon(20% 0%, 50% 100%, 50% 100%,0% 30%);}
#chr3{clip-path:polygon(0% 50%, 50% 100%, 50% 100%, 0% 100%);}
#chr4{clip-path:polygon(80% 0%, 100% 30%, 50% 100%, 50% 100%);}
#chr5{clip-path:polygon(50% 100%, 100% 50%, 100% 100%, 50% 100%);}
#chr1:hover,#chr2:hover,#chr3:hover,#chr4:hover,#chr5:hover{z-index:5;clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
--></style>