Montage 322

8 images au ratio 16/9.

Survol

<div style="width: 900px; height: 506px; margin: 5px auto; text-align: left;"><img id="chd1" class="chd" src="http://ekladata.com/UAio7QyHlhBvX3AK3lNPEmwrKF8.jpg" alt="" /> <img id="chd2" class="chd" src="http://ekladata.com/wm2_v_bIr-nuZ-xQefa9gDH5lCQ.jpg" alt="" /> <img id="chd3" class="chd" src="http://ekladata.com/TLa03XpriJEwmSriLeAHmmR6kHs.jpg" alt="" /> <img id="chd4" class="chd" src="http://ekladata.com/uhunMk9D7Pi7YKQ-UkY_4GKzIyg.jpg" alt="" /> <img id="chd5" class="chd" src="http://ekladata.com/qgkB2ZQ6lYtcoXVm3ErK08ot6rM.jpg" alt="" /> <img id="chd6" class="chd" src="http://ekladata.com/eG0LycttP1yUc11GcaJ_1_zbpOo.jpg" alt="" /> <img id="chd7" class="chd" src="http://ekladata.com/uJF3PUJxXmRqY60VXITR02qLaiY.jpg" alt="" /> <img id="chd8" class="chd" src="http://ekladata.com/Rl0WCOwzJ5uFub7cSoTy9jpWnpg.jpg" alt="" />
<p id="chd0">Survol</p>
</div>
<style><!--
#chd0{position:absolute; z-index:1; width:120px; font-size:25px; transform:translate(270px,20px);}
.chd{position:absolute; z-index:1; width:900px; height:506px; border-radius:50%; filter:grayscale(1); transition:all 1s linear 0s, filter 1s linear 1s;}
#chd1{clip-path:polygon(45% 0%,55% 0%,50% 50%,50% 50%);}
#chd2{clip-path:polygon(50% 50%,100% 40%,100% 60%,50% 50%);}
#chd3{clip-path:polygon(50% 50%,50% 50%,55% 100%,45% 100%);}
#chd4{clip-path:polygon(0% 40%,50% 50%,50% 50%,0% 60%);}
#chd5{clip-path:polygon(20% 0%,50% 50%,50% 50%,0% 5%);}
#chd6{clip-path:polygon(50% 50%,80% 0%,100% 5%,50% 50%);}
#chd7{clip-path:polygon(50% 50%,100% 95%,80% 100%,50% 50%);}
#chd8{clip-path:polygon(0% 95%,50% 50%,50% 50%,20% 100%);}
#chd1:hover,#chd2:hover,#chd3:hover,#chd4:hover,#chd5:hover,#chd6:hover,#chd7:hover,#chd8:hover{z-index:5; clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%); filter:grayscale(0);}
--></style>