-
Art.01B.7.21
Une image au ratio 16/9.
SURVOL
******************
<div style="width: 1000px; height: 562px; margin: 20px auto; text-align: left; background: #003333;">
<p id="dbb0"> </p>
<p id="dbb1">SURVOL</p>
<p id="dbb2" class="dbb"> </p>
<p id="dbb3" class="dbb"> </p>
<p id="dbb4" class="dbb"> </p>
<p id="dbb5" class="dbb"> </p>
<p id="dbb6" class="dbb"> </p>
<p id="dbb7" class="dbb"> </p>
</div>
<style><!--
#dbb0{position:absolute; z-index:5; width:1000px; height:562px;}
#dbb1{position:absolute; z-index:1; width:120px; font-size:25px; color:white; transform: translate(180px,20px);}
.dbb{position:absolute; z-index:2; width:1000px; height:562px; background:url('http://ekladata.com/g9RaVZWNzTrXQNueolOZBffj0Dc@1000x562.jpg'); background-size:1000px 562px;}
#dbb2{clip-path:polygon(0% 0%, 15% 0%, 0% 85%, 0% 85%); transition:all 1s 0s;}
#dbb3{clip-path:polygon(13% 30%, 30% 30%, 17% 100%, 0% 100%); transition:all 1s 0.2s;}
#dbb4{clip-path:polygon(39% 0%, 56% 0%, 42% 75%, 25% 75%); transition:all 1s 0.4s;}
#dbb5{clip-path:polygon(54% 30%, 71% 30%, 58% 100%, 41% 100%); transition:all 1s 0.6s;}
#dbb6{clip-path:polygon(80% 0%, 97% 0%, 83% 75%, 66% 75%); transition:all 1s 0.8s;}
#dbb7{clip-path:polygon(100% 0%, 100% 100%, 82% 100%, 82% 100%);}
#dbb0:hover ~ #dbb2{clip-path:polygon(0% 0%, 17% 0%, 0% 100%, 0% 100%);}
#dbb0:hover ~ #dbb3{clip-path:polygon(16% 0%, 40% 0%, 21% 100%, 0% 100%);}
#dbb0:hover ~ #dbb4{clip-path:polygon(39% 0%, 56% 0%, 42% 100%, 20% 100%);}
#dbb0:hover ~ #dbb5{clip-path:polygon(55% 0%, 80% 0%, 62% 100%, 41% 100%);}
#dbb0:hover ~ #dbb6{clip-path:polygon(80% 0%, 100% 0%, 83% 100%, 61% 100%);}
--></style>