Art.31c.8.21

7 images au ratio 4/3, dimensionnées en 1000px par 750px par le code. Survol des vignettes.

<div style="width:1000px; height:750px; margin:20px auto; text-align:left; background:url('http://ekladata.com/NPoTVOSxVP1oDSQP_-JY4ok7n4U@1000x750.jpg'); background-size:cover;">
<img id="jj1" class="jj" src="http://ekladata.com/mPk9JvTJqjwJL3nm9I5jRhU4jX4@1000x750.jpg">
<img id="jj2" class="jj" src="http://ekladata.com/NPdjJzfFijHHixYxPMkEZhfgPg4@1000x750.jpg">
<img id="jj3" class="jj" src="http://ekladata.com/lPVb4j4YRFeDhd4-oiphLcv3Ppw@1000x750.jpg">
<img id="jj4" class="jj" src="http://ekladata.com/qaAk2eT7UH4RKD1PK1oxg3_1Dp4@1000x750.jpg">
<img id="jj5" class="jj" src="http://ekladata.com/fVoY6WqE3hnzLdvcr_C71hZL31s@1000x750.jpg">
<img id="jj6" class="jj" src="http://ekladata.com/FCI9g-rjbs4h7nbMNk_jDqUpubA@1000x750.jpg">
</div>

<style><!--
.jj{position:absolute; z-index:1; width:100px; height:75px; border:4px ridge white; transition:all 1s;}
#jj1{box-sizing:border-box; transform:translate(65px,675px);}
#jj2{box-sizing:border-box; transform:translate(225px,675px);}
#jj3{box-sizing:border-box; transform:translate(385px,675px);}
#jj4{box-sizing:border-box; transform:translate(545px,675px);}
#jj5{box-sizing:border-box; transform:translate(705px,675px);}
#jj6{box-sizing:border-box; transform:translate(865px,675px);}
#jj1:hover,#jj2:hover,#jj3:hover,#jj4:hover,#jj5:hover,#jj6:hover{z-index:5; width:1000px; height:750px; transform:translate(0px,0px);}
--></style>