-
Art.06d.9.21
J'ai l'habitude de plutôt proposer ce genre de montage en vertical; 9 images au ratio 16/9.
Survol
<div style="width:1000px; height:562px; border:2px ridge grey; margin:20px auto; text-align:left; background:white;">
<p id="enl0">Survol</p>
<p id="enl1" class="enl"> </p>
<p id="enl2" class="enl"> </p>
<p id="enl3" class="enl"> </p>
<p id="enl4" class="enl"> </p>
<p id="enl5" class="enl"> </p>
<p id="enl6" class="enl"> </p>
<p id="enl7" class="enl"> </p>
<p id="enl8" class="enl"> </p>
<p id="enl9" class="enl"> </p>
</div>
<style><!--
#enl0{position:absolute; z-index:1; width:300px; text-align:center; font-size:25px; transform:translate(350px,160px);}
.enl{position:absolute; z-index:1; width:300px; height:150px; border:4px ridge white; background-size:1000px 562px; transition:all 1s;}
#enl1{box-sizing:border-box; background:url('http://ekladata.com/08nYlpZZhaF0doi0xa-Q38ewU_g@1000x562.jpg'); background-position:0px 0px; transform:translate(0px,0px);}
#enl2{box-sizing:border-box; background:url('http://ekladata.com/aePXBeLqG7Lk0KzwHXSZ0mb8JUU@1000x562.jpg'); background-position:-350px 0px; transform:translate(350px,0px);}
#enl3{box-sizing:border-box; background:url('http://ekladata.com/JP5peDnHKqiZEQp1ZJUCxpoJmok@1000x562.jpg'); background-position:-700px 0px; transform:translate(700px,0px);}
#enl4{box-sizing:border-box; background:url('http://ekladata.com/L4CXWKQnLYZ-vgtOA_k2geluAPA@1000x562.jpg'); background-position:0px -205px; transform:translate(0px,205px);}
#enl5{box-sizing:border-box; background:url('http://ekladata.com/s_PfpbQyoCQ6NswgwufQJ5oW5-A@1000x562.jpg'); background-position:-350px -205px; transform:translate(350px,205px);}
#enl6{box-sizing:border-box; background:url('http://ekladata.com/U-1cs_XX57I1rDdAN_7zWYbWmtc@1000x562.jpg'); background-position:-700px -205px; transform:translate(700px,205px);}
#enl7{box-sizing:border-box; background:url('http://ekladata.com/EpaIFVVxYN8W9POpU8wkOBxvlU0@1000x562.jpg'); background-position:0px -410px; transform:translate(0px,410px);}
#enl8{box-sizing:border-box; background:url('http://ekladata.com/Lv6mWdIEYZB_8rfvZYpYHLRh1bQ@1000x562.jpg'); background-position:-350px -410px; transform:translate(350px,410px);}
#enl9{box-sizing:border-box; background:url('http://ekladata.com/PKm2MnzxKK5WLVvd1l0BVH60QFU@1000x562.jpg'); background-position:-700px -410px; transform:translate(700px,410px);}
#enl1:hover,#enl2:hover,#enl3:hover,#enl4:hover,#enl5:hover,#enl6:hover,#enl7:hover,#enl8:hover,#enl9:hover{z-index:5; width:1000px; height:562px; background-position:0px 0px; transform:translate(0px,0px);}
--></style>