05.10.2024

Clic sur le bouton pour afficher 5 images à survoler.
Survol de l'image pour l'agrandir.
Clic pour Retour.

Clic

---

<div style="background: url('http://ekladata.com/2JLo7UZl7F35A5UQzrB3kpPEe-w.jpg'); border-radius: 40px; border: 6px ridge white; box-shadow: black 4px 4px 6px; height: 675px; margin: 50px auto; overflow: hidden; position: relative; text-align: left; width: 1200px;"><input id="ck" type="text" />

<p id="exp">Clic sur le bouton pour afficher 5 images à survoler.<br />Survol de l'image pour l'agrandir.<br />Clic pour Retour.</p>

<p id="ck0">Clic</p>

<p id="gt1"><img alt="" class="kc" id="kc1" src="http://ekladata.com/geGpA30IkFxcyrnW3MwXPgHnrIs.jpg" /> <img alt="" class="kc" id="kc2" src="http://ekladata.com/21_GqO4Aod8T-A10LTNDE1JrlqI.jpg" /> <img alt="" class="kc" id="kc3" src="http://ekladata.com/T069rw1D5BhiwY8LpAcFVwKkD78.jpg" /> <img alt="" class="kc" id="kc4" src="http://ekladata.com/mzFasuDP-1UocMDSAKEmHw3Ondc.jpg" /> <img alt="" class="kc" id="kc5" src="http://ekladata.com/dLhw90p7Hbi2Gk51ANLuX0EAZXc.jpg" /></p>

</div>

<style><!--

#ck{position:absolute; z-index:5; width:80px; height:40px; border:none; background:transparent; border-radius:10px;transform:translate(560px,400px);}

#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); margin-top:0px; transition:1s linear;}

.kc{position:absolute; width:320px; height:180px!important; 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,470px);}

#kc5{transform:translate(650px,470px);}

#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!important;  transform:translate(0px,0px);}

--></style>