• 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">&nbsp;</p>
    <p id="dbb1">SURVOL</p>
    <p id="dbb2" class="dbb">&nbsp;</p>
    <p id="dbb3" class="dbb">&nbsp;</p>
    <p id="dbb4" class="dbb">&nbsp;</p>
    <p id="dbb5" class="dbb">&nbsp;</p>
    <p id="dbb6" class="dbb">&nbsp;</p>
    <p id="dbb7" class="dbb">&nbsp;</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>