• Art.3.6.21

    8 images au ratio 16/9; code en 999px par 561px.

     

     

     

     

    SURVOL

     

     

     

     

    <div style="width:999px; height:561px; margin:20px auto;">
    <p id="gf1" class="gf">&nbsp;</p>
    <p id="gf2" class="gf">&nbsp;</p>
    <p id="gf3" class="gf">&nbsp;</p>
    <p id="gf4" class="gf">&nbsp;</p>
    <p id="gf5" class="gf">SURVOL</p>
    <p id="gf6" class="gf">&nbsp;</p>
    <p id="gf7" class="gf">&nbsp;</p>
    <p id="gf8" class="gf">&nbsp;</p>
    <p id="gf9" class="gf">&nbsp;</p>
    </div>
    <style><!--
    .gf{position:absolute; z-index:1; width:333px; height:187px; border:4px solid white; transition:all 1s linear;}
    #gf1{background:url('http://ekladata.com/jqdLdzGrbISwzeccXQInQFDZ7pA.jpg'); background-size:999px 561px; background-position:0px 0px; transform:translate(0px,0px);}
    #gf2{background:url('http://ekladata.com/cPbLWKOdhiRnXbWE3SOxB_sKOTk.jpg'); background-size:999px 561px; background-position:-333px 0px; transform:translate(333px,0px);}
    #gf3{background:url('http://ekladata.com/F6VGBqTJtZb6MmJoU3146tUiYD8.jpg'); background-size:999px 561px; background-position:-666px 0px; transform:translate(666px,0px);}
    #gf4{background:url('http://ekladata.com/1wTquiE_EPd40T-762-STatpY04.jpg'); background-size:999px 561px; background-position:0px -187px; transform:translate(0px,187px);}
    #gf5{text-align:center; line-height:187px; font-size:25px; color:lime; text-shadow:2px 2px black;transform:translate(333px,187px);}
    #gf6{background:url('http://ekladata.com/OmQtwYZGA7MrNFHbMLo6uQRUOIg.jpg'); background-size:999px 561px; background-position:-666px -187px; transform:translate(666px,187px);}
    #gf7{background:url('http://ekladata.com/IzAr3xapXGzHh0I0Bb02FiJ1SrQ.jpg'); background-size:999px 561px; background-position:0px -374px; transform:translate(0px,374px);}
    #gf8{background:url('http://ekladata.com/1hJaEyR4otGRph2N0c8KFQS29aA.jpg'); background-size:999px 561px; background-position:-333px -374px; transform:translate(333px,374px);}
    #gf9{background:url('http://ekladata.com/E8Nex2I20XlCTr1j9rxG6ahhS2c.jpg'); background-size:999px 561px; background-position:-666px -374px; transform:translate(666px,374px);}
    #gf1:hover,#gf2:hover,#gf3:hover,#gf4:hover,#gf6:hover,#gf7:hover,#gf8:hover,#gf9:hover{z-index:5; width:999px; height:561px; background-position:0px 0px; transform:translate(0px,0px);}
    --></style>