• Art.18.4.22

    8 images au ratio 16/9, dimensionnées en 1000px par 562px.

    SURVOL

     

     

     

     

     

     

     

     


    <div style="width: 1000px; height: 562px; margin: 30px auto; text-align: left;">
    <p id="jar0">SURVOL</p>
    <p id="jar1" class="jar">&nbsp;</p>
    <p id="jar2" class="jar">&nbsp;</p>
    <p id="jar3" class="jar">&nbsp;</p>
    <p id="jar4" class="jar">&nbsp;</p>
    <p id="jar5" class="jar">&nbsp;</p>
    <p id="jar6" class="jar">&nbsp;</p>
    <p id="jar7" class="jar">&nbsp;</p>
    <p id="jar8" class="jar">&nbsp;</p>
    </div>
    <style><!--
    #jar0{position:absolute; z-index:1; width:200px; text-aling:center; font-size:30px; color:lime; text-shadow:1px 1px black; transform:translate(450px,260px);}
    .jar{position:absolute; z-index:1; width:250px; height:281px; border:4px ridge white; background-size:1000px 563px; transition:all 1s;}
    #jar1{box-sizing:border-box; background:url('http://ekladata.com/dinuo4AwfTj6J-4sSjPUc-2jiNI@1000x562.jpg'); background-position:0px 0px; transform:translate(0px,0px);}
    #jar2{box-sizing:border-box; background:url('http://ekladata.com/V3oRYj0kuw-Moyo7UqzwVPyR7BA@1000x562.jpg'); background-position:0px -281px; transform:translate(0px,281px);}
    #jar3{box-sizing:border-box; height:250px; background:url('http://ekladata.com/2iHJtc2PsSMte2K5z4iGDAecLUo@1000x562.jpg'); background-position:-250px 0px; transform:translate(250px,0px);}
    #jar4{box-sizing:border-box; height:250px; background:url('http://ekladata.com/5R9CzoIagXsMOxw_01stmEu9aLI@1000x562.jpg'); background-position:-250px -312px; transform:translate(250px,312px);}
    #jar5{box-sizing:border-box; height:250px; background:url('http://ekladata.com/UjtoFBb5LMTJVRGWqu9fZh3IcKg@1000x562.jpg'); background-position:-500px 0px; transform:translate(500px,0px);}
    #jar6{box-sizing:border-box; height:250px; background:url('http://ekladata.com/kgiHMpK-bkrN6WRfjUzVGWQ3FOQ@1000x562.jpg'); background-position:-500px -312px; transform:translate(500px,312px);}
    #jar7{box-sizing:border-box; background:url('http://ekladata.com/2TE6zmoF6rnDj14krnESOZeO0vA@1000x562.jpg'); background-position:-750px 0px; transform:translate(750px,0px);}
    #jar8{box-sizing:border-box; background:url('http://ekladata.com/mPLH25RmAdauBtbNqYz6g9QoZ0w@1000x562.jpg'); background-position:-750px -281px; transform:translate(750px,281px);}
    #jar1:hover,#jar2:hover,#jar3:hover,#jar4:hover,#jar5:hover,#jar6:hover,#jar7:hover,#jar8:hover{z-index:5; width:1000px; height:562px; background-position:0px 0px; transform:translate(0px,0px);}
    --></style>