Serpentins

  5 images en 1200x675px.

SURVOL

 

 

 

 

 

---

<div id="lan">
<p id="sv">SURVOL</p>
<p id="fd1" class="fd">&nbsp;</p>
<p id="fd2" class="fd">&nbsp;</p>
<p id="fd3" class="fd">&nbsp;</p>
<p id="fd4" class="fd">&nbsp;</p>
<p id="fd5" class="fd">&nbsp;</p>
</div>

<style><!--
#sv{position:absolute; width:30px; height:200px; text-align:center; font-size:35px; line-height:30px; transform:translate(430px,300px);}
#lan{position:relative; width:1200px; height:675px; margin:50px auto;}
.fd{position:absolute; z-index:1; width:1200px; height:675px; transition:all 1s;}
#fd1{background:url('http://ekladata.com/rFZsfZh91vxjKTtaX7AVaks0uzM.jpg'); background-size:cover; clip-path:polygon(0% 0%, 5% 20%,0% 40%,5% 60%, 0% 80%,5% 100%,15% 100%, 10% 80%, 15% 60%, 10% 40%, 15% 20%,10% 0%);}
#fd2{background:url('http://ekladata.com/-kRdMapn6fnsYv4fclZBMepqNBM.jpg'); background-size:cover; clip-path:polygon(25% 0%, 20% 20%,25% 40%,20% 60%, 25% 80%,20% 100%,30% 100%, 35% 80%, 30% 60%, 35% 40%, 30% 20%,35% 0%);}
#fd3{background:url('http://ekladata.com/7JrX3SidzbxxWN1I1ZCJDTRuOuY.jpg'); background-size:cover; clip-path:polygon(40% 0%, 45% 20%,40% 40%,45% 60%, 40% 80%,45% 100%,55% 100%, 50% 80%, 55% 60%, 50% 40%, 55% 20%,50% 0%);}
#fd4{background:url('http://ekladata.com/4uLuB6iIlQR4xFGleGf5-W4Enbg.jpg'); background-size:cover; clip-path:polygon(65% 0%, 60% 20%,65% 40%,60% 60%, 65% 80%,60% 100%,70% 100%, 75% 80%, 70% 60%, 75% 40%, 70% 20%,75% 0%);}
#fd5{background:url('http://ekladata.com/iJOqrhjQia_F2c4CgogahJ2d0Rk.jpg'); background-size:cover; clip-path:polygon(80% 0%, 85% 20%,80% 40%,85% 60%, 80% 80%,85% 100%,95% 100%, 90% 80%, 95% 60%, 90% 40%, 95% 20%,90% 0%);}
#fd1:hover,#fd2:hover,#fd3:hover,#fd4:hover,#fd5:hover{z-index:5; clip-path:polygon(0% 0%, 0% 20%,0% 40%,0% 60%, 0% 80%,0% 100%,100% 100%, 100% 80%, 100% 60%, 100% 40%, 100% 20%,100% 0%);}
--></style>