• Exemple 197

    8 images au ratio 16/9 1 image en 580px par 562px.

    Survol

     

     

     

     

     

     

     

     


    <div style="width: 1000px; height: 562px; margin: 5px auto; text-align: left;"><img id="fd" src="http://ekladata.com/EdDHFMVRMI_5-S23xRf0tzZBb30.jpg" alt="" />
    <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>
    <p id="sk6" class="sk">&nbsp;</p>
    <p id="sk7" class="sk">&nbsp;</p>
    <p id="sk8" class="sk">&nbsp;</p>
    </div>

    <style><!--
    #fd{position:absolute; z-index:1; width:580px; height:562px; transform:translate(250px,0px);}
    #sk0{position:absolute; z-index:1; width:150px; font-size:40px; color:lime; text-shadow:2px 2px black; transform:translate(0px,0px);}
    .sk{position:absolute; z-index:1; width:300px; height:140.5px; border:4px ridge grey; box-shadow:inset -4px -4px 6px white, inset 6px 6px 8px black; transition:all 1s linear;}
    #sk1{box-sizing:border-box; background:url('http://ekladata.com/gZI_nCXb0k3DlZEVQlpYvECdCF8.jpg'); background-size:1000px 562px; background-position:-200px 0px; transform:translate(200px,0px) skewx(-30deg);}
    #sk2{box-sizing:border-box; background:url('http://ekladata.com/0E8DiZ4VbgypDl5cmRNRTPGdQZg.jpg'); background-size:1000px 562px; background-position:-120px -140.5px; transform:translate(120px,140.5px) skewx(-30deg);}
    #sk3{box-sizing:border-box; background:url('http://ekladata.com/h-x-wReDFTFIuMB7CrKLqhzZwOU.jpg'); background-size:1000px 562px; background-position:-120px -281px; transform:translate(120px,281px) skewx(30deg);}
    #sk4{box-sizing:border-box; background:url('http://ekladata.com/tqv1AESLlj8LvNGp7PS9Vk4u02Y.jpg'); background-size:1000px 562px; background-position:-200px -421.5px; transform:translate(200px,421.5px) skewx(30deg);}
    #sk5{box-sizing:border-box; background:url('http://ekladata.com/tqv1AESLlj8LvNGp7PS9Vk4u02Y.jpg'); background-size:1000px 562px; background-position:-570px 0px; transform:translate(570px,0px) skewx(30deg);}
    #sk6{box-sizing:border-box; background:url('http://ekladata.com/9N0vVAaX4UmQLnQlrus5vx8eAPs.jpg'); background-size:1000px 562px; background-position:-650px -140.5px; transform:translate(650px,140.5px) skewx(30deg);}
    #sk7{box-sizing:border-box; background:url('http://ekladata.com/DGmRY5hI_gBxshxl-JPfPM_sQZs.jpg'); background-size:1000px 562px; background-position:-650px -281px; transform:translate(650px,281px) skewx(-30deg);}
    #sk8{box-sizing:border-box; background:url('http://ekladata.com/_KzYPaOn7kbIddH6qEAXJo8m4gY.jpg'); background-size:1000px 562px; background-position:-570px -421.5px; transform:translate(570px,421.5px) skewx(-30deg);}
    #sk1:hover,#sk2:hover,#sk3:hover,#sk4:hover,#sk5:hover,#sk6:hover,#sk7:hover,#sk8:hover{z-index:5; width:1000px; height:562px; background-position:0px 0px; transform:translate(0px,0px) skewx(0deg);}
    --></style>