Montage 254

6 images au ratio 16/9 à survoler.

Le code est écrit en %, plus lisible qu'en vw; pas de couleur de fond dans cette version.

<div style="width: 1000px; height: 563px; margin: 5px auto;  text-align: left;"><img id="pl1" class="pl" src="http://ekladata.com/BS3vuz5_Jkk71CGGJLaZTEZMJVY.jpg" alt="" /> <img id="pl2" class="pl" src="http://ekladata.com/-nWaCSGdJDIbpxf8mE8CXwxkS8Y.jpg" alt="" /> <img id="pl3" class="pl" src="http://ekladata.com/L-6zcSk-F8BLODEPSCqGfqj9uh8.jpg" alt="" /> <img id="pl4" class="pl" src="http://ekladata.com/gVoADi229c1gTzatNmSMEhFH3QU.jpg" alt="" /> <img id="pl5" class="pl" src="http://ekladata.com/Ux17ZgpAb09i4Qao2wIxrwbBTxU.jpg" alt="" /> <img id="pl6" class="pl" src="http://ekladata.com/GcG4eRiX2PrWSl5aR6CyeGCm1eg.jpg" alt="" /></div>

<style><!--
.pl{position:absolute; z-index:1; width:1000px; height:563px; transition:all 1s linear;}
#pl1{clip-path:polygon(0% 0%, 20% 0%, 30% 60%, 0% 15%);}
#pl2{clip-path:polygon(25% 0%, 100% 0%, 35% 55%, 35% 55%);}
#pl3{clip-path:polygon(55% 45%, 100% 10%, 100% 70%, 55% 45%);}
#pl4{clip-path:polygon(50% 50%, 100% 80%, 100% 100%, 60% 100%);}
#pl5{clip-path:polygon(46% 55%, 46% 55%, 55% 100%, 0% 100%);}
#pl6{clip-path:polygon(0% 25%, 25% 65%, 25% 65%, 0% 90%);}
#pl1:hover,#pl2:hover,#pl3:hover,#pl4:hover,#pl5:hover,#pl6:hover{z-index:5;clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
--></style>