• 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">&nbsp;</p>
    <p id="enl2" class="enl">&nbsp;</p>
    <p id="enl3" class="enl">&nbsp;</p>
    <p id="enl4" class="enl">&nbsp;</p>
    <p id="enl5" class="enl">&nbsp;</p>
    <p id="enl6" class="enl">&nbsp;</p>
    <p id="enl7" class="enl">&nbsp;</p>
    <p id="enl8" class="enl">&nbsp;</p>
    <p id="enl9" class="enl">&nbsp;</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>