Printemps

Un code simple que je crois déjà avoir proposé:

ici, 6 images au ratio 16/9; clic sur chaque image pour l'agrandir et clic pour la réduire; bordure comprise dans la dimension hors-tout (box-sizing:border-box); ne pas oublier que, dans le code, l'élément cliqué doit se trouver avant l'élément animé (prt0 en dernière ligne); le positionnement est simple avec "scale" ont le point d'origine est le centre du montage pour chaque élément.

<div style="width:1200px; height:675px; margin:50px 0 0 -25px;">

<p id="indic">CL I C</p>

<input id="prt1" class="prt" type="image" src="https://image.eklablog.com/7JDbhw4kxP87uxILtLMYKz_eoLQ=/filters:no_upscale()/http%3A%2F%2Fekladata.com%2FqCT0WCunG9OhQCQ9wBsQpwMPKZ4.jpg">

<input id="prt2" class="prt" type="image" src="https://image.eklablog.com/Mofe006OctuTVRrLzeL8H5WMLm8=/filters:no_upscale()/http%3A%2F%2Fekladata.com%2FbLTvnOMTb-Wz0pzRiXHVOPJDYFw.jpg">

<input id="prt3" class="prt" type="image" src="https://image.eklablog.com/r_8RNgeuDz1G0E3Sn36gAJvVfqU=/filters:no_upscale()/http%3A%2F%2Fekladata.com%2FWbWc7NIS6HyH-TZwIpiu4MRuODg.jpg">

<input id="prt4" class="prt" type="image" src="https://image.eklablog.com/tZt3VPznhf33oXFmBz9XwjCrmDQ=/filters:no_upscale()/http%3A%2F%2Fekladata.com%2F0enUT-BSY4fKGqfgswuaFuE8Rbk.jpg">

<input id="prt5" class="prt" type="image" src="https://image.eklablog.com/r_8RNgeuDz1G0E3Sn36gAJvVfqU=/filters:no_upscale()/http%3A%2F%2Fekladata.com%2FWbWc7NIS6HyH-TZwIpiu4MRuODg.jpg">

<input id="prt6" class="prt" type="image" src="https://image.eklablog.com/4tjV4-mN1CiSO4QAYygh6sgbmxs=/filters:no_upscale()/http%3A%2F%2Fekladata.com%2FI9BDYGLsnEUigy5fCMfbN4SMYyg.jpg">

<input id="prt0" type="texte">  

</div>

<style><!--

#indic{position:absolute; z-index:3;width:60px; height:220px; margin-top:0px; text-align:center; background:rgba(0,0,0,0.5); font-size:60px; line-height:50px; color:white; text-shadow:1px 1px black; transform:translate(6px,12px);}

#prt0{position:absolute; z-index:1; width:1200px; height:675px; background:transparent;}

.prt{position:absolute; z-index:2; width:1200px; height:675px; border:6px ridge white; transition:all 1s;}

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

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

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

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

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

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

#prt1:focus,#prt2:focus,#prt3:focus,#prt4:focus,#prt5:focus,#prt6:focus{z-index:5;transform:translate(0px,0px) scale(1);}

.prt:focus~#prt0{z-index:10;}

--></style>

CL I C