• Montage 86

    Code demandé en 60% de la largeur de l'écran de lecture, pour 6 images au ratio 16/9
    Remplacez mes adresses d'images en bleu par les vôtres, quelles que soient leurs dimensions.
    Survol

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto;">
    <p id="lav1" class="lav">&nbsp;</p>
    <p id="lav2" class="lav">&nbsp;</p>
    <p id="lav3" class="lav">&nbsp;</p>
    <p id="lav4" class="lava">&nbsp;</p>
    <p id="lav5" class="lava">&nbsp;</p>
    <p id="lav6" class="lava">&nbsp;</p>
    </div>

    <style><!--
    .lav{position:absolute; z-index:1; width:20vw; height:16.75vw; border:0.4vh solid white; transition:all 1s linear;}
    #lav1{background:url('http://ekladata.com/bzHaY2qzXNZGLwGxbll5DPGCu3E.jpg'); background-size:60vw 33.75vw; background-position:0vw 0vw; box-sizing:border-box; transform:translate(0vw,0vw);}
    #lav2{background:url('http://ekladata.com/gZgVfHiE8oFidskAaIzrByIJhbc.jpg'); background-size:60vw 33.75vw; background-position:-20vw 0vw; box-sizing:border-box; transform:translate(20vw,0vw);}
    #lav3{background:url('http://ekladata.com/KgkhBwy079BiNVjLyhigzZOBRzQ.jpg'); background-size:60vw 33.75vw; background-position:-40vw 0vw; box-sizing:border-box; transform:translate(40vw,0vw);}
    .lava{position:absolute; z-index:1; width:20vw; height:17vw; border:0.4vh solid white; transition:all 1s linear;}
    #lav4{background:url('http://ekladata.com/gCswp7PQGAWqC5FtqNaIz6L51bk.jpg'); background-size:60vw 33.75vw; background-position:0vw -16.75vw; box-sizing:border-box; transform:translate(0vw,16.75vw);}
    #lav5{background:url('http://ekladata.com/IRQaQPyeUTIimKRowI8FLWUrJow.jpg'); background-size:60vw 33.75vw; background-position:-20vw -16.75vw; box-sizing:border-box;transform:translate(20vw,16.75vw);}
    #lav6{background:url('http://ekladata.com/93U8der08xXXqTnXmimjdvPOeAI.jpg'); background-size:60vw 33.75vw; background-position:-40vw -16.75vw; box-sizing:border-box; transform:translate(40vw,16.75vw);}
    #lav1:hover,#lav2:hover,#lav3:hover,#lav4:hover,#lav5:hover,#lav6:hover{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw); background-position:0vw 0vw;}
    --></style>