Clip-path3

5 images au ratio 16/9 dimensionnées en 1000x563px.

SURVOL

**************************

<div style="width: 1000px; height: 563px; margin: 20px auto; text-align: left; background: white; border: 1px solid black;"><img id="cv1" class="cv" src="http://ekladata.com/A5Qqs9AvcCQIT9f72HJXp17ea2s@1000x563.jpg" alt="" /> <img id="cv2" class="cv" src="http://ekladata.com/YQ-dOnnJa7SA2ZU8g_nT9wCiRik@1000x563.jpg" alt="" /> <img id="cv3" class="cv" src="http://ekladata.com/VELX6PdKpp1ZUjpWiyhslPMRU9M@1000x563.jpg" alt="" /> <img id="cv4" class="cv" src="http://ekladata.com/tgcaaIpeLZyeJUj6LD32kGecBPY@1000x563.jpg" alt="" /> <img id="cv5" class="cv" src="http://ekladata.com/qZy-YPVlGuhKWFKMNBsdXnO5ilg@1000x563.jpg" alt="" />
<p id="cv0">SURVOL</p>
</div>
<style><!--
#cv0{position:absolute; z-index:1; width:150px; font-size:25px; transform:translate(85px,250px) rotate(-60deg);}
.cv{position:absolute; z-index:1; width:1000px; height:563px; transition:all 1s;}
#cv1{clip-path:polygon(0% 0%, 30% 0%, 0% 93%, 0% 93%);}
#cv2{clip-path:polygon(23% 30%, 23% 30%, 50% 100%, 0% 100%);}
#cv3{clip-path:polygon(32.5% 0%, 65% 0%, 39% 63%, 24% 26%);}
#cv4{clip-path:polygon(40% 67%,51% 41%, 100% 100%, 53% 100%);}
#cv5{clip-path:polygon(68% 0%, 100% 0%, 100% 95%, 52% 38%);}
#cv1:hover,#cv2:hover,#cv3:hover,#cv4:hover,#cv5:hover{z-index:5; clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
--></style>

************************

Pour celles et ceux qui utilisent des images au ratio 4/3, vous pouvez simplement remplacer les adresses de mes images par les vôtres, les dimensionner en, par exemple, 1000x750px en remplaçant mes @1000x563 par @1000x750

et en dimensionnant le cadre en width:1000px; height:750px;

et pi c'est tout !