05.10.2024

1 + 5 images en 16/9 dans un montage en 1200x675px, modifiable selon votre choix. 

La difficulté de la commande par clic est que le second clique ramène à zéro et que le survol n'est plus possible sans revenir à zéro également.

Il faut donc cliquer sur un paragraphe qui contient des images qui, elles, peuvent se survoler et revenir à zéro en sortant du survol sans modifier le montage.

<div style="position: relative; overflow: hidden; width: 1200px; height: 675px; border-radius: 40px; margin: 50px auto; text-align: left; border: 6px ridge white; box-shadow: 4px 4px 6px black; background: url('http://ekladata.com/2JLo7UZl7F35A5UQzrB3kpPEe-w.jpg'); background-size: cover;"><input id="ck" type="text" />
<p id="exp">Clic sur le bouton pour afficher 5 images &agrave; survoler.<br />Survol l'image pour l'agrandir.<br />Retour: clic.</p>
<p id="ck0">Clic</p>
<p id="gt1"><img id="kc1" class="kc" src="http://ekladata.com/geGpA30IkFxcyrnW3MwXPgHnrIs.jpg" alt="" /> <img id="kc2" class="kc" src="http://ekladata.com/21_GqO4Aod8T-A10LTNDE1JrlqI.jpg" alt="" /> <img id="kc3" class="kc" src="http://ekladata.com/T069rw1D5BhiwY8LpAcFVwKkD78.jpg" alt="" /> <img id="kc4" class="kc" src="http://ekladata.com/mzFasuDP-1UocMDSAKEmHw3Ondc.jpg" alt="" /> <img id="kc5" class="kc" src="http://ekladata.com/dLhw90p7Hbi2Gk51ANLuX0EAZXc.jpg" alt="" /></p>
</div>
<style><!--
#ck{position:absolute; z-index:5; width:80px; height:40px; background:transparent; border:none; border-radius:10px;transform:translate(560px,375px);}
#exp{position:absolute; z-index:2; width:500px; height:170px; padding:15px; border:4px ridge grey; border-radius:40px; background:rgba(102,255,255,1);text-align:center; font-size:25px; transform:translate(350px,215px);}
#ck0{position:absolute; z-index:2; width:80px; height:40px; border:1px solid black; border-radius:10px; box-shadow:inset 4px 4px 6px black; text-align:center; background:green; line-height:40px;font-size:30px; color:white; text-shadow:1px 1px black; transform:translate(560px,375px);}
#gt1{position:absolute; z-index:1; width:1200px; height:675px; transform:translate(0px, 0px) scale(0);; transition:1s linear;}
.kc{position:absolute; width:320px; height:180px; border:4px ridge grey; border-radius:40px; transition:all 1s;}
#kc1{transform:translate(20px,20px);}
#kc2{transform:translate(440px,20px);}
#kc3{transform:translate(860px,20px);}
#kc4{transform:translate(230px,435px);}
#kc5{transform:translate(650px,435px);}
#ck:focus ~ #gt1{z-index:10; transform:translate(0px,0px) scale(1);}
#kc1:hover,#kc2:hover,#kc3:hover,#kc4:hover,#kc5:hover{z-index:1; width:1200px; height:675px; transform:translate(0px,0px);}
--></style>