Collage 2

Même principe avec disposition plus simple et 5 images.

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="lesp1">&nbsp;</p>
<p id="lesp2">&nbsp;</p>
<p id="lesp3">&nbsp;</p>
<p id="lesp4">&nbsp;</p>
<p id="lesp5">&nbsp;</p>
</div>
<style><!--
.btlesp{position:absolute; width:2vw; height:2vw; border:0.4vh solid white;}
#btlesp1{z-index:2; transform:translate(2vw,2vh);}
#btlesp2{z-index:2; transform:translate(57vw,2vh);}
#btlesp3{z-index:2; transform:translate(2vw,40vh);}
#btlesp4{z-index:2; transform:translate(57vw,40vh);}
#btlesp5{z-index:2; transform:translate(40vw,22vh);}

#lesp1{position:absolute; z-index:1; width:30vw; height:34.5vh; box-sizing:border-box; border:0.3vh solid white; background:url('http://ekladata.com/-C0tu2KbH1wymMZLU6MVwqgPH1U.jpg'); background-size:30vw 34.5vh; transform:translate(0vw,0vh); transition:all 1s linear;}
#lesp2{position:absolute; z-index:1; width:30vw; height:34.5vh; box-sizing:border-box; border:0.3vh solid white; background:url('http://ekladata.com/OarULkZScacVpcpoE-AxJUiBPcU.jpg'); background-size:30vw 34.5vh; transform:translate(30vw,0vh); transition:all 1s linear;}
#lesp3{position:absolute; z-index:1; width:30vw; height:34.5vh; box-sizing:border-box; border:0.3vh solid white; background:url('http://ekladata.com/vY4xP6FNy4ome2Cjj490bbnETk4.jpg'); background-size:30vw 34.5vh; transform:translate(0vw,34.5vh); transition:all 1s linear;}
#lesp4{position:absolute; z-index:1; width:30vw; height:34.5vh; box-sizing:border-box; border:0.3vh solid white; background:url('http://ekladata.com/EApB85AeP5j-bwinf0ipZb9afyA.jpg'); background-size:30vw 34.5vh; transform:translate(30vw,34.5vh); transition:all 1s linear;}
#lesp5{position:absolute; z-index:1; width:30vw; height:34.5vh; box-sizing:border-box; border:0.3vh solid white; background:url('http://ekladata.com/0X73OnraSVNlnAFL8CDNpn7szHQ.jpg'); background-size:30vw 34.5vh; transform:translate(15vw,17vh); transition:all 1s linear;}

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

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