• Mont2.2.4.23

    5 images au ratio 16/9 et 1000x563px.

    SURVOL

     

     

     

     

     


    <div style="width: 1000px; height: 563px; margin: 30px auto; text-align: left;">
    <p id="sk0">SURVOL</p>
    <p id="sk1" class="sk">&nbsp;</p>
    <p id="sk2" class="sk">&nbsp;</p>
    <p id="sk3" class="sk">&nbsp;</p>
    <p id="sk4" class="sk">&nbsp;</p>
    <p id="sk5" class="sk">&nbsp;</p>
    </div>
    <style><!--
    #sk0{position:absolute; z-index:1; width:40px; height:563px; text-align:center; font-size:30px; transform:translate(175px,0px);}
    .sk{position:absolute; z-index:1; width:100px; height:563px; border-radius:50%;box-shadow:inset -4px -4px 8px white, inset 4px 4px 8px black; background-size:1000px 563px; filter:sepia(1); transition:all 1s, filter 1s 1s;}
    #sk1{ background:url('http://ekladata.com/AVG6lk7Zwo_RSxwwAfO6jwvON2I.jpg'); background-position:-50px 0px; transform:translate(50px,0px);}
    #sk2{background:url('http://ekladata.com/hSH2RFlHFRJRJJi20qFtgSvOUpc.jpg'); background-position:-250px 0px; transform:translate(250px,0px);}
    #sk3{ background:url('http://ekladata.com/nOHB30nCMDggD1hWWjrf8-pyLFM.jpg'); background-position:-450px 0px; transform:translate(450px,0px);}
    #sk4{background:url('http://ekladata.com/9j66lUSFgvvmqONMx25gqZLYWac.jpg'); background-position:-650px 0px; transform:translate(650px,0px);}
    #sk5{background:url('http://ekladata.com/reT63xkix9D5nb0Q8LZr7CCN9DM.jpg'); background-position:-850px 0px; transform:translate(850px,0px);}
    #sk1:hover,#sk2:hover,#sk3:hover,#sk4:hover,#sk5:hover{z-index:5; width:1000px; height:563px; border-radius:0%; filter:sepia(0); background-position:0px 0px; transform:translate(0px,0px);}
    --></style>