-
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"> </p>
<p id="es2" class="es"> </p>
<p id="es3" class="es"> </p>
<p id="es4" class="es"> </p>
<p id="es5" class="es"> </p>
<p id="es6" class="es"> </p>
<p id="es7" class="es"> </p>
<p id="es8" class="es"> </p>
<p id="es9" class="es"> </p>
<p id="es10" class="es"> </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>