• Montage 122

    Revenons à des agrandissements de la taille du montage, avant de vous proposer le même mais en plein écran.

    8 images au ratio 16/9.

    Mes pages étant paramétrées avec le texte centré, je dois ajouter des attributs pour présenter le montage affiché en centre de la page, ce qui n'est peut-être pas votre cas.

    Survol

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; text-align: left;"><img id="aut1" class="aut" src="http://ekladata.com/dJttmRNWGomaYPujUT9gRCTYVHM.jpg" alt="" /><img id="aut2" class="aut" src="http://ekladata.com/_CQwBpt9MTCAZRyaNUBjStzGwAU.jpg" alt="" /><img id="aut3" class="aut" src="http://ekladata.com/BsVIwRdrX293HwpU41xcNRc8bZU.jpg" alt="" /><img id="aut4" class="aut" src="http://ekladata.com/EoXzgVFAv7pCOH7BocrKnVL44qQ.jpg" alt="" /><img id="aut5" class="aut" src="http://ekladata.com/_WRMjYcLASzjXY0SFVnT0OoE28Y.jpg" alt="" /><img id="aut6" class="aut" src="http://ekladata.com/wV58RB3oojUmAA16tD8hXXlvmbI.jpg" alt="" /><img id="aut7" class="aut" src="http://ekladata.com/zZdbFHHba2PVE--x3fT7ceU8E2U.jpg" alt="" /><img id="aut8" class="aut" src="http://ekladata.com/H7sAhZU2m6nWIDJdFs1gPT5Myq8.jpg" alt="" />
    <p id="sv">Survol</p>
    </div>
    <style><!--
    #sv{position:absolute; z-index:1; width:20vw; height:11.25vw; box-sizing:border-box; border:0.3vh solid white; background:linear-gradient(to bottom, grey 0%, #FFEBCD 100%); transform:translate(20vw,11.25vw); text-align:center; font-size:3vw; color:coral; line-height:11vw; text-shadow:0.2vh 0.2vh black;}
    .aut{position:absolute; z-index:1; width:20vw; height:11.25vw; border:0.3vh solid white; background-size:cover; transition:all 1s linear;}
    #aut1{box-sizing:border-box; transform:translate(0vw,0vw);}
    #aut2{box-sizing:border-box; transform:translate(20vw,0vw);}
    #aut3{box-sizing:border-box; transform:translate(40vw,0vw);}
    #aut4{box-sizing:border-box; transform:translate(0vw,11.25vw);}
    #aut5{box-sizing:border-box; transform:translate(40vw,11.25vw);}
    #aut6{box-sizing:border-box; transform:translate(0vw,22.5vw);}
    #aut7{box-sizing:border-box; transform:translate(20vw,22.5vw);}
    #aut8{box-sizing:border-box; transform:translate(40vw,22.25vw);}
    #aut1:hover,#aut2:hover,#aut3:hover,#aut4:hover,#aut5:hover,#aut6:hover,#aut7:hover,#aut8:hover{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw);}
    --></style>