Fleur

5 images au ratio 16/9, en 1000px par 563px. 

SURVOL

<div style="width: 1000px; height: 563px; margin: 30px auto; text-align: left;"><img id="exp1" class="exp" src="https://ekladata.com/DDYONHShSUgZqY1XBpud-zNm20M.jpg" alt="" /> <img id="exp2" class="exp" src="https://ekladata.com/Oym-YSlzdm9CfvT5a0czgoBvqiI.jpg" alt="" /> <img id="exp3" class="exp" src="https://ekladata.com/U12LlzYEaST40uW5-vqdbJqA71k.jpg" alt="" /> <img id="exp4" class="exp" src="https://ekladata.com/hbgq6LAzdKMkabsazPX80ZI4hxI.jpg" alt="" /> <img id="exp5" class="exp" src="https://ekladata.com/plDJFXFYEuPihRyIJuvziYOy1-w.jpg" alt="" />
<p id="sv">SURVOL</p>
</div>
<style><!--
#sv{ position:absolute; z-index:1; width:120px; font-size:25px; transform:translate(20px,50px);}
.exp{position:absolute; z-index:1; width:1000px; height:563px;filter:sepia(1); transition:all 1s;}
#exp1{clip-path:polygon(0% 50%, 20% 50%, 50% 100%, 10% 80%);}
#exp2{clip-path:polygon(80% 50%, 100% 50%, 90% 80%, 50% 100%);}
#exp3{clip-path:polygon(40% 30%,50% 0%, 60% 30%, 50% 100%);}
#exp4{clip-path:polygon(20% 10%,38% 30%,50% 100%,21% 47%);}
#exp5{clip-path:polygon(62% 30%,80% 10%, 78% 48%, 50% 100%);}
#exp1:hover,#exp2:hover,#exp3:hover,#exp4:hover,#exp5:hover{z-index:5; clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); filter:sepia(0);}
--></style>