-
Montage 305
5 images au ratio 16/9.
Survol
<div style="width: 900px; height: 506px; margin: 5px auto; text-align: left; border: 1px solid black; background: linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 100%);"><img id="gel1" class="gel" src="http://ekladata.com/2B_knZHPx8cTBPuoPJOa_EMBf20.jpg" alt="" /> <img id="gel2" class="gel" src="http://ekladata.com/g_rg43gIZhnVi3EBnmVIBPDxBoM.jpg" alt="" /> <img id="gel3" class="gel" src="http://ekladata.com/EdCQH3e1hL4gFMdjeTznbwu8oYY.jpg" alt="" /> <img id="gel4" class="gel" src="http://ekladata.com/GosBp1eqqmMSbs7u_suhRmgl3Ro.jpg" alt="" /> <img id="gel5" class="gel" src="http://ekladata.com/nU_ALqS7kLrQazPIIQBXSY9xkb8.jpg" alt="" />
<p id="gg">Survol</p>
</div>
<style><!--
#gg{position:absolute; z-index:1; width:120px; font-size:30px; transform:translate(280px,20px);}
.gel{position:absolute; z-index:1; width:900px; height:506px; filter:hue-rotate(120deg); transition:all 1s linear 0s, filter 1s linear 1s;}
#gel1{clip-path:polygon(50% 10%, 60% 50%, 50% 90%,40% 50%);}
#gel2{clip-path:polygon(5% 5%, 28% 15%, 40% 50%,17% 40%);}
#gel3{clip-path:polygon(72% 15%, 95% 5%, 83% 40%,60% 50%);}
#gel4{clip-path:polygon(60% 50%, 83% 60%, 95% 95%,72% 85%);}
#gel5{clip-path:polygon(17% 60%, 40% 50%, 28% 85%,5% 95%);}
#gel1:hover,#gel2:hover,#gel3:hover,#gel4:hover,#gel5:hover{z-index:5;filter:hue-rotate(0deg); clip-path:polygon(0% 0%, 100% 0%, 100% 100%,0% 100%);}
--></style>