Hexagone

 7 images au ratio 16/9 dans un montage de 1200x675px.

<div style="width: 1200px; height: 675px; margin: 50px auto; text-align: left;"><input id="can1" class="can" src="https://ekladata.com/cYWekETl_KyQywcCO6cgIDUt5Rw.jpg" type="image" /> <input id="can2" class="can" src="https://ekladata.com/dgxd3Ru62zf3Q9887lTxBU7-lqo.jpg" type="image" /> <input id="can3" class="can" src="https://ekladata.com/t6XoHit1i3TX2pHoHwQpRFNoC0Q.jpg" type="image" /> <input id="can4" class="can" src="https://ekladata.com/FSN-GMyWIa02G7gY0Vvmun4FeF0.jpg" type="image" /> <input id="can5" class="can" src="https://ekladata.com/6Dkx2eP9-3nBfotZGpVB4DTfbKs.jpg" type="image" /> <input id="can6" class="can" src="https://ekladata.com/brI_QdGsuXIH7nYpS-44N4PBOvM.jpg" type="image" /> <input id="can7" class="can" src="https://ekladata.com/XTLYJa4nLI4fKXyEIDnH5xcDdfA.jpg" type="image" />
<p id="can0">&nbsp;</p>
<p id="ind">CLIC</p>
<p id="zero">&nbsp;</p>
</div>
<style><!--
.can{position:absolute; z-index:3; width:320px; height:180px;clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); transition:all 1s;}
#can1{transform:translate(450px,240px);}
#can2{transform:translate(450px,40px);}
#can3{transform:translate(450px,440px);}
#can4{transform:translate(190px,140px);}
#can5{transform:translate(710px,140px);}
#can6{transform:translate(710px,340px);}
#can7{transform:translate(190px,340px);}
#can0{position:absolute; z-index:2; box-sizing:border-box; width:890px; height:675px; border:4px ridge grey; background: linear-gradient(to top, #cedce7 0%,#596a72 100%); transform:translate(160px,0px);}
#ind{position:absolute; z-index:2; width:100px; font-size:30px; color:white; text-shadow:2px 2px black; transform:translate(200px,50px);}
#zero{position:absolute; z-index:1;width:890px; height:675px;}
#can1:focus,#can2:focus,#can3:focus,#can4:focus,#can5:focus,#can6:focus,#can7:focus{z-index:10;box-sizing:border-box; width:1200px; height:675px; border:6px ridge grey;transform:translate(0px,0px);clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%, 0% 50%);}
.can:focus~#zero{z-index:15;}
--></style>