16.10.2024

Montage en 1200x675px pour 9 images au ratio 16/9, commandées par 9 boutons invisibles. 

Je ne proposais pas beaucoup de montages avec animation au clic car il faut un autre clic hors bouton pour retour au départ; en plaçant les images agrandies en premier plan, le retour se fait par un clic sur l'image, ce qui est plus agréable.

Clic pour agrandir et réduire.

<div style="width:1200px; height:675px; margin:50px auto; text-align:left;">
<input id="fr1" class="fr" type="text">
<input id="fr2" class="fr" type="text">
<input id="fr3" class="fr" type="text">
<input id="fr4" class="fr" type="text">
<input id="fr5" class="fr" type="text">
<input id="fr6" class="fr" type="text">
<input id="fr7" class="fr" type="text">
<input id="fr8" class="fr" type="text">
<input id="fr9" class="fr" type="text">
<p id="ef">Clic pour agrandir et réduire.</p>
<img id="fg1" class="fg" src="http://ekladata.com/UsG-UsAwaN0WVez068jQWeFzE-4.jpg">
<img id="fg2" class="fg" src="http://ekladata.com/e-A3cwTP5L2FlpBZfyEqfmTZBGA.jpg">
<img id="fg3" class="fg" src="http://ekladata.com/KewAL2U_LTOOGy18rvUQfUwV-bA.jpg">
<img id="fg4" class="fg" src="http://ekladata.com/BlWT6FNhzbXZFL5qSVEhVw7uu5A.jpg">
<img id="fg5" class="fg" src="http://ekladata.com/qDXreKjE3mLGYDLpHH8ZmCnQZaY.jpg">
<img id="fg6" class="fg" src="http://ekladata.com/n0hTYKEOUAoVdnfchvsOQkOGurs.jpg">
<img id="fg7" class="fg" src="http://ekladata.com/neZXd7fTzOsguLQKn5Zuz5EAGDs.jpg">
<img id="fg8" class="fg" src="http://ekladata.com/SsSk3duCWvg0USV_3phIezHfHGE.jpg">
<img id="fg9" class="fg" src="http://ekladata.com/lHtVuW-V5OxZHthxVuP6KbZN-2Y.jpg">
</div>
<style><!--
#ef{position:absolute; z-index:1; width:350px; font-size:22px; transform:translate(440px,205px);}
.fr{position:absolute; z-index:3; width:340px; height:185px; border:none; background:transparent;}
#fr1{transform:translate(5px,5px);}
#fr2{transform:translate(425px,5px);}
#fr3{transform:translate(845px,5px);}
#fr4{transform:translate(5px,242px);}
#fr5{transform:translate(425px,242px);}
#fr6{transform:translate(845px,242px);}
#fr7{transform:translate(5px,478px);}
#fr8{transform:translate(425px,478px);}
#fr9{transform:translate(845px,478px);}
.fg{position:absolute; z-index:1; width:360px; height:202px; border:6px solid white; transition:all 1s;}
#fg1{box-sizing:border-box; transform:translate(0px,0px);}
#fg2{box-sizing:border-box; transform:translate(420px,0px);}
#fg3{box-sizing:border-box; transform:translate(840px,0px);}
#fg4{box-sizing:border-box; transform:translate(0px,237px);}
#fg5{box-sizing:border-box; transform:translate(420px,237px);}
#fg6{box-sizing:border-box; transform:translate(840px,237px);}
#fg7{box-sizing:border-box; transform:translate(0px,473px);}
#fg8{box-sizing:border-box; transform:translate(420px,473px);}
#fg9{box-sizing:border-box; transform:translate(840px,473px);}
#fr1:focus ~ #fg1,#fr2:focus ~ #fg2,#fr3:focus ~ #fg3,#fr4:focus ~ #fg4,#fr5:focus ~ #fg5,#fr6:focus ~ #fg6,#fr7:focus ~ #fg7,#fr8:focus ~ #fg8,#fr9:focus ~ #fg9{z-index:6; width:1200px; height:675px; transform:translate(0px,0px);}
--></style>