Art.20B.6.21

7 images au ratio 16/9

SURVOL

<div style="width: 1000px; height: 562px; margin: 20px auto; text-align: left;"><img id="or1" class="or" src="http://ekladata.com/-JTm-X_Y7fkMz_4G31PPfzx0yus@1000x562.jpg" alt="" /> <img id="or2" class="or" src="http://ekladata.com/bDew2gnMZVAGPgo9CmLvjwnU4vk@1000x562.jpg" alt="" /> <img id="or3" class="or" src="http://ekladata.com/0gOMqlAWPJKbZFT4oMOKTSP97tg@1000x562.jpg" alt="" /> <img id="or4" class="or" src="http://ekladata.com/SRpY-VxpF3o3l6nHxR2Ax7tpFro@1000x562.jpg" alt="" /> <img id="or5" class="or" src="http://ekladata.com/Er_j8hT21d3bcbDLkWMdhq4DC6w@1000x562.jpg" alt="" /> <img id="or6" class="or" src="http://ekladata.com/WuN7wy8SlULdjZJzEhY4pp6y3aI@1000x562.jpg" alt="" /> <img id="or7" class="or" src="http://ekladata.com/yEkI9SFrPEmPrydwk6ZW_FffY0I@1000x562.jpg" alt="" />
<p id="gf">SURVOL</p>
</div>
<style><!--
#gf{ position:absolute; z-index:1; width:150px; font-size:30px; color:green; text-shadow:2px 2px black;}
.or{position:absolute; z-index:1; transition:all 1s;}
#or1{clip-path:polygon(0% 30%, 20% 10%, 15% 80%, 0% 70%);}
#or2{clip-path:polygon(20% 10%, 40% 20%, 35% 70%, 15% 80%);}
#or3{clip-path:polygon(40% 20%, 40% 20%, 55% 60%, 35% 70%);}
#or4{clip-path:polygon(40% 20%, 60% 10%, 55% 60%, 55% 60%);}
#or5{clip-path:polygon(60% 10%, 60% 10%, 80% 80%, 55% 60%);}
#or6{clip-path:polygon(60% 10%, 85% 5%, 80% 80%, 80% 80%);}
#or7{clip-path:polygon(85% 5%, 100% 25%, 100% 70%, 80% 80%);}
#or1:hover,#or2:hover,#or3:hover,#or4:hover,#or5:hover,#or6:hover,#or7:hover{z-index:5;clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
--></style>