monta.03.08.2024

Exemple en 1200px par 675px (ratio 16/9) et 3 images verticales et 3 images horizontales.
Retour par un clic hors montage.

 

CLIC vignettes

---

<div style="width: 1200px; height: 675px; margin: 50px auto;"><img id="fd" src="https://i.goopics.net/juvmyi.jpg" alt="" />
<p id="fdl">&nbsp;</p>
<p id="clic">CLIC vignettes</p>
<input id="vg1" class="vgv" type="text" /> <input id="vg2" class="vgv" type="text" /> <input id="vg3" class="vgv" type="text" /> <input id="vg4" class="vgh" type="text" /> <input id="vg5" class="vgh" type="text" /> <input id="vg6" class="vgh" type="text" /></div>

<style><!--
#fdl{position:absolute; z-index:1;width:200px; height:675px; background:rgba(0,0,0,0.5); transform:translate(982px,-15px);}
#fd{position:absolute; z-index:1; box-sizing:border-box; width:1200px; height:675px; border:4px solid white; opacity:0.4;transform:translate(0px,0px);}
#clic{position:absolute; z-index:1; width:200px; text-align:center; font-size:25px; color:white;transform:translate(1000px,0px);}
.vgv{position:absolute; z-index:5; width:60px; border-radius:50%; border:2px solid white; transition:all 1s;}
#vg1{box-sizing:border-box; height:60px; background:url('https://i.goopics.net/rnyohk.jpg'); background-size:cover; transform:translate(1010px,100px);}
#vg2{box-sizing:border-box; height:60px; background:url('https://i.goopics.net/yot5uw.jpg'); background-size:cover; transform:translate(1110px,100px);}
#vg3{box-sizing:border-box; height:60px; background:url('https://i.goopics.net/1v98n1.jpg'); background-size:cover; transform:translate(1010px,200px);}
#vg1:focus,#vg2:focus,#vg3:focus{width:380px; height:675px; border-radius:0%; border:4px solid white; transform:translate(340px,0px);}
.vgh{position:absolute; z-index:5; width:60px; border-radius:50%; border:2px solid white; transition:all 1s;}
#vg4{box-sizing:border-box; height:60px; background:url('https://i.goopics.net/nrlt19.jpg'); background-size:cover; transform:translate(1110px,200px);}
#vg5{box-sizing:border-box; height:60px; background:url('https://i.goopics.net/pk82ql.jpg'); background-size:cover; transform:translate(1010px,300px);}
#vg6{box-sizing:border-box; height:60px; background:url('https://i.goopics.net/yh680s.jpg'); background-size:cover; transform:translate(1110px,300px);}
#vg4:focus,#vg5:focus,#vg6:focus{z-index:10; width:1200px; height:675px; border-radius:0%; border:4px solid white; transform:translate(0px,0px);}
--></style>