16.10.2024

 

 Dernièrement, j'ai publié quelques montages au clic, et il m'a semblé que cela intéressait alors, je persiste !

Dans cet exemple, une image verticale et 6 images horizontales en ratio 16/9; tout est modifiable dans le ratio d'image ou en nombre.

L'inconvénient de la commande au clic est qu'il faut un second clic pour revenir au départ; j'ai donc rusé pour que le clic de retour soit sur l'image agrandie.

Le code en 1200x675px:

<div style="width: 1200px; height: 675px; margin: 50px auto; text-align: left;"><span style="font-size: 14pt;"><img id="cent" src="http://ekladata.com/F9QkxtWUt0J-FlgelZWKOFBmMbQ.jpg" alt="" /></span>

<p id="cc"><span style="font-size: 14pt;">Clic pour agrandir et clic pour refermer.</span></p>

<span style="font-size: 14pt;"><input id="sk1" class="sk" type="text" /> <input id="sk2" class="sk" type="text" /> <input id="sk3" class="sk" type="text" /> <input id="sk4" class="sk" type="text" /> <input id="sk5" class="sk" type="text" /> <input id="sk6" class="sk" type="text" /> <img id="mag1" class="mag" src="http://ekladata.com/fwVygLB2rFleco5vrKaxMm42W1s.jpg" alt="" /> <img id="mag2" class="mag" src="http://ekladata.com/-f4gfFpMLXKEubkNqpZ0xxKoY0Q.jpg" alt="" /> <img id="mag3" class="mag" src="http://ekladata.com/v6JZbwnJ2BYPoDbLXRYdaj3McYU.jpg" alt="" /> <img id="mag4" class="mag" src="http://ekladata.com/9BIdr4x0Q5WowKBdMOcsskyGTYM.jpg" alt="" /> <img id="mag5" class="mag" src="http://ekladata.com/i0iVdvBctssGe-eRaKGc-tnxMg4.jpg" alt="" /> <img id="mag6" class="mag" src="http://ekladata.com/aUXiKskXKQI2s-e7I5r-GY6LBDg.jpg" alt="" /></span></div>

<style><!--

#cent{position:absolute; z-index:1; box-sizing:border-box; width:380px; height:675px; border:6px ridge white; transform:translate(410px,0px);}

#cc{position:absolute; z-index:1;width:400px; height:auto; font-size:22px; transform:translate(20px,20px);}

.sk{position:absolute; z-index:5; width:240px; height:135px; border:none!important; background:transparent;}

#sk1{transform:translate(30px,100px) skewx(20deg);}

#sk2{transform:translate(30px,250px) skewx(20deg);}

#sk3{transform:translate(30px,400px) skewx(20deg);}

#sk4{transform:translate(920px,100px) skewx(-20deg);}

#sk5{transform:translate(920px,250px) skewx(-20deg);}

#sk6{transform:translate(920px,400px) skewx(-20deg);}

.mag{position:absolute; z-index:2; width:240px; height:135px; border:6px ridge white; transition:all 1s;}

#mag1{box-sizing:border-box; transform:translate(30px,100px) skewx(20deg);}

#mag2{box-sizing:border-box; transform:translate(30px,250px) skewx(20deg);}

#mag3{box-sizing:border-box; transform:translate(30px,400px) skewx(20deg);}

#mag4{box-sizing:border-box; transform:translate(920px,100px) skewx(-20deg);}

#mag5{box-sizing:border-box; transform:translate(920px,250px) skewx(-20deg);}

#mag6{box-sizing:border-box; transform:translate(920px,400px) skewx(-20deg);}

.sk:focus{z-index:1;} 

#sk1:focus ~ #mag1,#sk2:focus ~ #mag2,#sk3:focus ~ #mag3,#sk4:focus ~ #mag4,#sk5:focus ~ #mag5,#sk6:focus ~ #mag6{z-index:10; width:1200px; height:675px;transform:translate(0px,0px) skewx(0deg);}

--></style>

Clic pour agrandir et clic pour refermer.