• ArtC.4.4.21

     Dans mon exemple, à mes dimensions habituelles, 6 images au ratio 16/9.
    Ne pouvant proposer un montage aux dimensions de chacun, je vous laisse le modifier à vos dimensions.

    Clic

    Le principe est de placer les images les unes à côté des autres, dans un paragaphe (id="der") et de déplacer ce paragraphe par un clic sur différents boutons (#pos1,#pos2,...)

    <div style="position: relative; overflow: hidden; width: 80vw; height: 45vw; margin: 1vh auto; border: 1px solid black; text-align: left;"><input id="pos1" class="pos" type="button" /> <input id="pos2" class="pos" type="button" /> <input id="pos3" class="pos" type="button" /> <input id="pos4" class="pos" type="button" /> <input id="pos5" class="pos" type="button" /> <input id="pos6" class="pos" type="button" />
    <p id="der"><img class="gm" src="http://ekladata.com/PDcLYeAyaCDqQKdcwFYfiVchKe4.jpg" alt="" /><img class="gm" src="http://ekladata.com/VIIOyOPKjITjSlQhN4g2JXN1L00.jpg" alt="" /><img class="gm" src="http://ekladata.com/5uJ00A8azG8O2owaeDcW1RhaeSo.jpg" alt="" /><img class="gm" src="http://ekladata.com/D9gRE8pXsTX6UPD_7xC90zQnq-M.jpg" alt="" /><img class="gm" src="http://ekladata.com/L6U7i4f-GpN5Qkc_12KamOKtrCY.jpg" alt="" /><img class="gm" src="http://ekladata.com/RAoRkm5G0TwVeIpG1kAxVAHgamE.jpg" alt="" /></p>
    <p id="gr">Clic</p>
    </div>

    <style><!--
    .pos{position:absolute; z-index:5; width:1vw; height:1vw; border-radius:50%;}
    #pos1{transform:translate(25vw,43vw);}
    #pos2{transform:translate(30vw,43vw);}
    #pos3{transform:translate(35vw,43vw);}
    #pos4{transform:translate(40vw,43vw);}
    #pos5{transform:translate(45vw,43vw);}
    #pos6{transform:translate(50vw,43vw);}
    #der{position:absolute; z-index:1; width:480vw; height:45vw; transform:translate(0vw,0vw); transition:all 1s linear;}
    .gm{width:80vw; height:45vw;}
    #gr{position:absolute; z-index:1; width:80vw; height:3vw; font-size:1.5vw; color:white; line-height:3vw; background:rgba(0,0,0,0.5); transform:translate(0vw,42vw);}
    #pos1:focus ~ #der{transform:translate(0vw,0vw);}
    #pos2:focus ~ #der{transform:translate(-80vw,0vw);}
    #pos3:focus ~ #der{transform:translate(-160vw,0vw);}
    #pos4:focus ~ #der{transform:translate(-240vw,0vw);}
    #pos5:focus ~ #der{transform:translate(-320vw,0vw);}
    #pos6:focus ~ #der{transform:translate(-400vw,0vw);}
    --></style>