Collage

�Je reprends ici, le code d'un article à venir, modifié en 60vw/69vh. Survolez les carrés blanc.

<div style="width: 60vw; height: 69vh; margin: 2vh auto; border: 0.3vh ridge white;">
<p id="btlesp1" class="btlesp">&nbsp;</p>
<p id="btlesp2" class="btlesp">&nbsp;</p>
<p id="btlesp3" class="btlesp">&nbsp;</p>
<p id="btlesp4" class="btlesp">&nbsp;</p>
<p id="btlesp5" class="btlesp">&nbsp;</p>
<p id="btlesp6" class="btlesp">&nbsp;</p>
<p id="lesp1">&nbsp;</p>
<p id="lesp2">&nbsp;</p>
<p id="lesp3">&nbsp;</p>
<p id="lesp4">&nbsp;</p>
<p id="lesp5">&nbsp;</p>
<p id="lesp6">&nbsp;</p>
</div>
<style><!--
.btlesp{position:absolute; width:2vw; height:2vw; border:0.4vh solid white;}
#btlesp1{z-index:2; transform:translate(15vw,2vh);}
#btlesp2{z-index:2; transform:translate(55vw,2vh);}
#btlesp3{z-index:2; transform:translate(15vw,25vh);}
#btlesp4{z-index:2; transform:translate(55vw,25vh);}
#btlesp5{z-index:2; transform:translate(35vw,48vh);}
#btlesp6{z-index:2; transform:translate(55vw,48vh);}
#lesp1{position:absolute; z-index:1; width:20vw; height:23vh; box-sizing:border-box; border:0.3vh solid white; background:url('http://ekladata.com/IYzvnk76x5GqquBfna7ahqoevG8.jpg'); background-size:20vw 23vh; transform:translate(0vw,0vh); transition:all 1s linear;}
#lesp2{position:absolute; z-index:1; width:40vw; height:23vh; box-sizing:border-box; border:0.3vh solid white; background:url('http://ekladata.com/VByXW-wr6MaroiYKQEFZnN5kpFI.jpg'); background-size:40vw 23vh; transform:translate(20vw,0vh); transition:all 1s linear;}
#lesp3{position:absolute; z-index:1; width:20vw; height:46vh; box-sizing:border-box; border:0.3vh solid white; background:url('http://ekladata.com/a9gkTJD67FimRKd96jD59Kyma24.jpg'); background-size:20vw 46vh; transform:translate(0vw,23vh); transition:all 1s linear;}
#lesp4{position:absolute; z-index:1; width:40vw; height:23vh; box-sizing:border-box; border:0.3vh solid white; background:url('http://ekladata.com/rT7gA21elaZNlzsHzQeqcdIjIIs.jpg'); background-size:40vw 23vh; transform:translate(20vw,23vh); transition:all 1s linear;}
#lesp5{position:absolute; z-index:1; width:20vw; height:23vh; box-sizing:border-box; border:0.3vh solid white; background:url('http://ekladata.com/nwCCemjrMEH2ObFnRP9AzIIfWMs.jpg'); background-size:20vw 23vh; transform:translate(20vw,46vh); transition:all 1s linear;}
#lesp6{position:absolute; z-index:1; width:20vw; height:23vh; box-sizing:border-box; border:0.3vh solid white; background:url('http://ekladata.com/YrNNz6FAeOAKJnxCPNDB5fEL9Xk.jpg'); background-size:20vw 23vh; transform:translate(40vw,46vh); transition:all 1s linear;}

#btlesp1:hover,#btlesp2:hover,#btlesp3:hover,#btlesp4:hover,#btlesp5:hover,#btlesp6:hover{z-index:20;border:none;}

#btlesp1:hover ~ #lesp1,#btlesp2:hover ~ #lesp2,#btlesp3:hover ~ #lesp3,#btlesp4:hover ~ #lesp4,#btlesp5:hover ~ #lesp5,#btlesp6:hover ~ #lesp6{z-index:10; width:60vw; height:69vh; background-size:60vw 69vh; transform:translate(0vw,0vh);}
--></style>

Remplacez mes 6 adresses d'images par les vôtres, qu'elles qu'en soient leur dimension.

D'autres dispositions sont possibles avec un nombre d'images à votre convenance.