Losanges.

Montage écrit sur Ekla et recopié sur une page Blogger, pour 5 images en 1200x675px, ratio 16/9.

SURVOL

 

 

 

 

 

---

 <div id="lan">
<p id="sv">SURVOL</p>
<p id="los1" class="los">&nbsp;</p>
<p id="los2" class="los">&nbsp;</p>
<p id="los3" class="los">&nbsp;</p>
<p id="los4" class="los">&nbsp;</p>
<p id="los5" class="los">&nbsp;</p>
</div>

<p></p>
<style><!--
#sv{position:absolute; width:150px; height:30px; text-align:center; font-size:35px; line-height:30px; transform:translate(160px,10px);}
#lan{position:relative; width:1200px; height:675px; margin:50px auto;}
.los{position:absolute; z-index:1; width:1200px; height:675px; transition:all 1s;}
#los1{background:url('http://ekladata.com/rFZsfZh91vxjKTtaX7AVaks0uzM.jpg'); background-size:cover; clip-path:polygon(10% 0%, 20% 16%,10% 33%,20% 50%, 10% 67%,20% 83%,10% 100%,0% 83%,10% 67%,0% 50%, 10% 33%, 0% 16%);}
#los2{background:url('http://ekladata.com/-kRdMapn6fnsYv4fclZBMepqNBM.jpg'); background-size:cover; clip-path:polygon(30% 0%, 40% 16%,30% 33%,40% 50%, 30% 67%,40% 83%,30% 100%,20% 83%,30% 67%,20% 50%, 30% 33%, 20% 16%);}
#los3{background:url('http://ekladata.com/7JrX3SidzbxxWN1I1ZCJDTRuOuY.jpg'); background-size:cover; clip-path:polygon(50% 0%, 60% 16%,50% 33%,60% 50%, 50% 67%,60% 83%,50% 100%,40% 83%,50% 67%,40% 50%, 50% 33%, 40% 16%);}
#los4{background:url('http://ekladata.com/4uLuB6iIlQR4xFGleGf5-W4Enbg.jpg'); background-size:cover; clip-path:polygon(70% 0%, 80% 16%,70% 33%,80% 50%, 70% 67%,80% 83%,70% 100%,60% 83%,70% 67%,60% 50%, 70% 33%, 60% 16%);}
#los5{background:url('http://ekladata.com/EjHvDx3h3ezhlLuc_Fk85WguukE.jpg'); background-size:cover; clip-path:polygon(90% 0%, 100% 16%,90% 33%,100% 50%, 90% 67%,100% 83%,90% 100%,80% 83%,90% 67%,80% 50%, 90% 33%, 80% 16%);}
#los1:hover,#los2:hover,#los3:hover,#los4:hover,#los5:hover{z-index:5; clip-path:polygon(100% 0%, 100% 16%, 100% 33%, 100% 50%,100% 67%,100% 83%,100% 100%, 0% 100%,0% 67%,0% 50%, 0% 33%,0% 0%);}
--></style>