• Exemple 65

    1+10 images au ratio 16/9  redimensionnées en 1152x648px par le code.

     

     

     

     

     

     

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; text-align: left; border: 0.1vh solid black; background: url('http://ekladata.com/DxfA3XfeHRFSGxZunyFKFKbWXzY@1152x648.jpg'); background-size: cover;">
    <p id="es1" class="es">&nbsp;</p>
    <p id="es2" class="es">&nbsp;</p>
    <p id="es3" class="es">&nbsp;</p>
    <p id="es4" class="es">&nbsp;</p>
    <p id="es5" class="es">&nbsp;</p>
    <p id="es6" class="es">&nbsp;</p>
    <p id="es7" class="es">&nbsp;</p>
    <p id="es8" class="es">&nbsp;</p>
    <p id="es9" class="es">&nbsp;</p>
    <p id="es10" class="es">&nbsp;</p>
    </div>
    <hr style="border: 0.3vh double grey;" />
    <p>...</p>
    <style><!--
    .es{position:absolute; z-index:1; width:10vw; height:6.5vw; background-size:cover; border:0.4vh ridge white; transition:all 1s linear;}
    #es1{box-sizing:border-box; background:url('http://ekladata.com/_imxhsIhP3Li46ECz2RNPGyJK0k@1152x648.jpg');; transform: translate(5vw,0.5vw) skewx(20deg);}
    #es2{box-sizing:border-box; background:url('http://ekladata.com/OYf05gXoN71n28iAGD-TXyiltjk@1152x648.jpg'); transform: translate(5vw,7vw) skewx(-20deg);}
    #es3{box-sizing:border-box; background:url('http://ekladata.com/THW52dvlJlEfDa7Gh8uU7Z87SFU@1152x648.jpg'); transform: translate(5vw,13.5vw) skewx(20deg);}
    #es4{box-sizing:border-box; background:url('http://ekladata.com/ogINW10BFGUBXSoVtTgoBWU0-PM@1152x648.jpg'); transform: translate(5vw,20vw) skewx(-20deg);}
    #es5{box-sizing:border-box; background:url('http://ekladata.com/VsjhX8BLfZLcOkwUAMccuIJPRGY@1152x648.jpg'); transform: translate(5vw,26.5vw) skewx(20deg);}
    #es6{box-sizing:border-box; background:url('http://ekladata.com/VYvHgwLKylYrT9-AGY_A1yAbfr0@1152x648.jpg'); transform: translate(45vw,0.5vw) skewx(-20deg);}
    #es7{box-sizing:border-box; background:url('http://ekladata.com/5o02B8RxCn3fsSxOIWXmX2GvSEI@1152x648.jpg'); transform: translate(45vw,7vw) skewx(20deg);}
    #es8{box-sizing:border-box; background:url('http://ekladata.com/841BJssRPTbsZHO6wedAL_06oxI@1152x648.jpg'); transform: translate(45vw,13.5vw) skewx(-20deg);}
    #es9{box-sizing:border-box; background:url('http://ekladata.com/5mMJuG373u_K9v7g3H7Aj5uvv2Q@1152x648.jpg'); transform: translate(45vw,20vw) skewx(20deg);}
    #es10{box-sizing:border-box; background:url('http://ekladata.com/iOL-crxLnyBzh37m6PZOME3sKXw@1152x648.jpg'); transform: translate(45vw,26.5vw) skewx(-20deg);}
    #es1:hover,#es2:hover,#es3:hover,#es4:hover,#es5:hover,#es6:hover,#es7:hover,#es8:hover,#es9:hover,#es10:hover{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw) skewx(0deg);}
    --></style>