18.10.2024

<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,185px);}

.fr{position:absolute; z-index:3; width:340px; height:185px!important; border:none; background:transparent;}

#fr1{transform:translate(5px,5px);}

#fr2{transform:translate(405px,5px);}

#fr3{transform:translate(805px,5px);}

#fr4{transform:translate(5px,242px);}

#fr5{transform:translate(405px,242px);}

#fr6{transform:translate(805px,242px);}

#fr7{transform:translate(5px,478px);}

#fr8{transform:translate(405px,478px);}

#fr9{transform:translate(805px,478px);}

.fg{position:absolute; z-index:1; width:360px; height:202px!important; margin-top:0px; border:6px solid white; transition:all 1s;}

#fg1{box-sizing:border-box; transform:translate(0px,0px);}

#fg2{box-sizing:border-box; transform:translate(400px,0px);}

#fg3{box-sizing:border-box; transform:translate(800px,0px);}

#fg4{box-sizing:border-box; transform:translate(0px,237px);}

#fg5{box-sizing:border-box; transform:translate(400px,237px);}

#fg6{box-sizing:border-box; transform:translate(800px,237px);}

#fg7{box-sizing:border-box; transform:translate(0px,473px);}

#fg8{box-sizing:border-box; transform:translate(400px,473px);}

#fg9{box-sizing:border-box; transform:translate(800px,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!important; transform:translate(0px,0px);}

--></style>

Clic pour agrandir et réduire.