Art.5A.6.21

7 images au ratio 16/9.

SURVOL

<div style="width: 1000px; height: 562px; margin: 20px auto; text-align: left; border: 1px solid black; background: linear-gradient(to top, #deefff 0%,#98bede 100%);">
<img id="bn1" class="bn" src="http://ekladata.com/DyzWo2SLNdOn9ltWYth1wkFYFhg.jpg" alt="" />
<img id="bn2" class="bn" src="http://ekladata.com/vKc8CyMLSbZGHPQKYQtVCcxXnWo.jpg" alt="" />
<img id="bn3" class="bn" src="http://ekladata.com/sDD1zM6qLQrUkCLD6V6UHuhaONg.jpg" alt="" />
<img id="bn4" class="bn" src="http://ekladata.com/9oyMPzNC3XbGjnLB6WRhMtwjJQc.jpg" alt="" />
<img id="bn5" class="bn" src="http://ekladata.com/gfX9AB3UDJHol9-gOqvs7tO3pY0.jpg" alt="" />
<img id="bn6" class="bn" src="http://ekladata.com/RmvExAw488B-JS_mpdANszWQygM.jpg" alt="" />
<img id="bn7" class="bn" src="http://ekladata.com/VNNLiqnK6Eq4bKFj4Ja-kCQrN80.jpg" alt="" />
<p id="conc">SURVOL</p></div>
<style><!--
#conc{position:absolute; z-index:1; width:140px; font-size:30px;}
.bn{position:absolute; z-index:1; width:1000px; height:562px; filter:grayscale(1); transition:all 1s, filter 1s 1s;}
#bn1{clip-path:polygon(15% 10%, 25% 10%, 20% 90%, 20% 90%);}
#bn2{clip-path:polygon(35% 10%, 45% 10%, 40% 90%, 40% 90%);}
#bn3{clip-path:polygon(55% 10%, 65% 10%, 60% 90%, 60% 90%);}
#bn4{clip-path:polygon(75% 10%, 85% 10%, 80% 90%, 80% 90%);}
#bn5{clip-path:polygon(30% 10%, 30% 10%, 35% 90%, 25% 90%);}
#bn6{clip-path:polygon(50% 10%, 50% 10%, 55% 90%, 45% 90%);}
#bn7{clip-path:polygon(70% 10%, 70% 10%, 75% 90%, 65% 90%);}
#bn1:hover,#bn2:hover,#bn3:hover,#bn4:hover,#bn5:hover,#bn6:hover,#bn7:hover{z-index:5; clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); filter:grayscale(0);}
--></style>