• Art.19a.3.22

    Dans cet exemple: 6 images au ratio 16/9 dimensionnées en 1000px par 562px par @1000x562.jpg adaptable à d'autres ratios.

    SURVOL

     

     

     

     

     

    ********

    <div style="width: 1000px; height: 562px; margin: 25px auto; text-align: left; background: url('http://ekladata.com/UyubK4w0H73vfJ77tgKDl_VUxHI@1000x562.jpg'); background-size: cover;">
    <p id="jon0">SURVOL</p>
    <p id="scy1" class="scy">&nbsp;</p>
    <p id="scy2" class="scy">&nbsp;</p>
    <p id="scy3" class="scy">&nbsp;</p>
    <p id="scy4" class="scy">&nbsp;</p>
    <p id="scy5" class="scy">&nbsp;</p>
    </div>
    <style><!--
    #jon0{position:absolute; z-index:1; width:100px; height:562px; background:rgba(0,0,0,0.3); text-align:center; font-size:20px; color:white;transform:translate(900px,0px);}
    .scy{position:absolute; z-index:1; width:70px; height:70px; border:4px solid white; border-radius:50%; transition:all 1s;}
    #scy1{background:url('http://ekladata.com/OMr6Hxmc0HNqJ2FJ4rML3qemicc@1000x562.jpg'); background-position:-910px -50px; transform:translate(912px,50px);}
    #scy2{background:url('http://ekladata.com/0Ix_b3T1zCvQ8lDDIAW4QTJSlxw@1000x562.jpg'); background-position:-910px -150px; transform:translate(912px,150px);}
    #scy3{background:url('http://ekladata.com/oLt1fWn-9r7xrbXi7jMPKiNtL-g@1000x562.jpg'); background-position:-910px -250px; transform:translate(912px,250px);}
    #scy4{background:url('http://ekladata.com/wN8TdLbp3Zum0ZvbZsQJy4mdCUI@1000x562.jpg'); background-position:-910px -350px; transform:translate(912px,350px);}
    #scy5{background:url('http://ekladata.com/JmSjmaBB4s5sdniQQ5EX_GiRe1E@1000x562.jpg'); background-position:-910px -450px; transform:translate(912px,450px);}
    #scy1:hover, #scy2:hover,#scy3:hover, #scy4:hover,#scy5:hover{z-index:5; width:1000px; height:562px; border-radius:0%; border:none; background-position:0px 0px; transform:translate(0px,0px);}
    --></style>