Code simple

Montage en 1200x675px pour 5 images horizontales et 4 images verticales au ratio 16/9, modifiable à vos choix.

<div style="width:1200px; height:675px; margin:50px auto; text-align:left;">
<input id="deh1" class="deh" src="https://ekladata.com/Ss-5zevSWVrs-SHbLpp6FurcPSA.jpg" type="image">
<input id="deh2" class="deh" src="https://ekladata.com/sUXI3G-1ndk5iZl7aTy_5tiWpl0.jpg" type="image">
<input id="deh3" class="deh" src="https://ekladata.com/ploUSsGrd_EWN_3ehkl3mt_hu4s.jpg" type="image">
<input id="deh4" class="deh" src="https://ekladata.com/GQxpsPqRJ2oPN4Syw5N3jF7DXz0.jpg" type="image">
<input id="deh5" class="deh" src="https://ekladata.com/83VFLLQxSo21vacM10Bo1ZeFDPI.jpg" type="image">
<input id="dev0" src="https://ekladata.com/CFPG2sy7pfiAD41KbkDhHjbmFPQ.jpg" type="image">
<input id="dev1" class="dev" src="https://ekladata.com/6dRguOLoRlQUFyMb6yDoCKTNDEo.jpg" type="image">
<input id="dev2" class="dev" src="https://ekladata.com/yf41Mph7i0Fnt-qgayXFznQk4V4.jpg" type="image">
<input id="dev3" class="dev" src="https://ekladata.com/73rj-9RA9o1JKZAZ-j3OSZSnqr8.jpg" type="image">
<p id="inf">C L I C</p>
<p id="deb">&nbsp;</p>
</div>

<style><!--
.deh{position:absolute; z-index:3; width:320px; height:180px; margin-top:0px; border:6px ridge grey; transition:all 1s;}
#deh1{box-sizing:border-box; transform:translate(0px,0px);}
#deh2{box-sizing:border-box; transform:translate(0px,495px);}
#deh3{box-sizing:border-box; transform:translate(880px,0px);}
#deh4{box-sizing:border-box; transform:translate(880px,245px);}
#deh5{box-sizing:border-box; transform:translate(880px,495px);}
#dev0{position:absolute; z-index:3; box-sizing:border-box; width:380px; height:675px; margin-top:0px; border:6px ridge grey; transform:translate(410px,0px);}
.dev{position:absolute; z-index:3; width:100px; height:180px; margin-top:0px; border:6px ridge grey; transition:all 1s;}
#dev1{box-sizing:border-box; transform:translate(0px,245px);}
#dev2{box-sizing:border-box; transform:translate(110px,245px);}
#dev3{box-sizing:border-box; transform:translate(220px,245px);}
#inf{position:absolute; z-index:3; width:50px; height:675px; text-align:center; line-height:100px; font-size:50px; color:lime; text-shadow:2px 2px black; transform:translate(340px,0px);}
#deb{position:absolute; z-index:1; width:1200px; height:675px;}
.deh:focus ~ #deb,.dev:focus ~ #deb{z-index:15;}
#deh1:focus,#deh2:focus,#deh3:focus,#deh4:focus,#deh5:focus{z-index:10; width:1200px; height:675px; transform:translate(0px,0px);}
#dev1:focus,#dev2:focus,#dev3:focus{z-index:10; width:380px; height:675px; transform:translate(410px,0px);}
--></style>