• Mont.22.5.23

     8 images au ratio 16/9 en 1100x619px.

    SURVOL

     

     

     

     

     

     

     

     


    <div style="width: 1100px; height: 619px; margin: 30px auto; text-align: left;">
    <p id="sec0">SURVOL</p>
    <p id="sec1" class="sec">&nbsp;</p>
    <p id="sec2" class="sec">&nbsp;</p>
    <p id="sec3" class="sec">&nbsp;</p>
    <p id="sec4" class="sec">&nbsp;</p>
    <p id="sec5" class="sec">&nbsp;</p>
    <p id="sec6" class="sec">&nbsp;</p>
    <p id="sec7" class="sec">&nbsp;</p>
    <p id="sec8" class="sec">&nbsp;</p>
    </div>

    <style><!--
    #sec0{position:absolute; z-index:1; width:350px; height:200px; text-align:center; line-height:200px; font-size:30px; color:white; text-shadow:2px 2px black; transform:translate(370px,205px);}
    .sec{position:absolute; z-index:1; width:350px; height:200px; border:3px solid white; border-radius:100px; box-shadow:4px 4px 6px black; filter:grayscale(1);background-size:1100px 619px; transition:all 1s; }
    #sec1{box-sizing:border-box; background:url('http://ekladata.com/EbgxuOYvvgU0SSTPw-gdEK045YI.jpg'); transform:translate(10px,0px); background-position:-10px 0px;}
    #sec2{box-sizing:border-box; background:url('http://ekladata.com/2yBbiWg52UghmXMPbdcNtLqncfc.jpg'); transform:translate(370px,0px); background-position:-370px 0px;}
    #sec3{box-sizing:border-box; background:url('http://ekladata.com/I1s8OlpDFcPTLtMM1OfAERSWocI.jpg'); transform:translate(730px,0px); background-position:-730px 0px;}
    #sec4{box-sizing:border-box; background:url('http://ekladata.com/ojAQ-dtbqskc1yfH1Sy6tRVoEAA.jpg'); transform:translate(10px,205px); background-position:-10px -205px;}
    #sec5{box-sizing:border-box; background:url('http://ekladata.com/kgjNnguBh7HJLiCG6OADvryoNaQ.jpg'); transform:translate(730px,205px); background-position:-730px -205px;}
    #sec6{box-sizing:border-box; background:url('http://ekladata.com/B5bdW3dBPX4CQCglpLlrwE2PsSQ.jpg'); transform:translate(10px,410px); background-position:-10px -410px;}
    #sec7{box-sizing:border-box; background:url('http://ekladata.com/K98hznt8uHYBzLIDGd8gzddKcyk.jpg'); transform:translate(370px,410px); background-position:-370px -410px;}
    #sec8{box-sizing:border-box; background:url('http://ekladata.com/AYjV1kigbkk9WuSap3SUgNqojJk.jpg'); transform:translate(730px,410px); background-position:-730px -410px;}
    #sec1:hover,#sec2:hover,#sec3:hover,#sec3:hover,#sec4:hover,#sec5:hover,#sec6:hover,#sec7:hover,#sec8:hover{z-index:5; width:1100px; height:619px; transform:translate(0px,0px); filter:grayscale(0);background-position:0px 0px;}
    --></style>