mont.03.08.2024

 

CLIC vignettes

---

<div style="width: 1200px; height: 675px; margin: 50px auto; text-align: left;"><img id="fd" src="https://i.goopics.net/juvmyi.jpg" alt="" />
<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><!--
#fd{position:absolute; z-index:1; box-sizing:border-box; width:1000px; height:563px; border:4px solid grey; opacity:0.4;transform:translate(0px,0px);}
#clic{position:absolute; z-index:1; width:200px; text-align:center; font-size:25px; transform:translate(1000px,0px);}
.vgv{position:absolute; z-index:5; width:25px; border:2px solid white; transition:all 1s;}
#vg1{box-sizing:border-box; height:45px; background:url('https://i.goopics.net/rnyohk.jpg'); background-size:cover; transform:translate(1060px,70px);}
#vg2{box-sizing:border-box; height:45px; background:url('https://i.goopics.net/yot5uw.jpg'); background-size:cover; transform:translate(1100px,70px);}
#vg3{box-sizing:border-box; height:45px; background:url('https://i.goopics.net/1v98n1.jpg'); background-size:cover; transform:translate(1140px,70px);}
#vg1:focus,#vg2:focus,#vg3:focus{width:317px; height:563px; border:4px solid white; transform:translate(340px,0px);}
.vgh{position:absolute; z-index:5; width:80px; border:2px solid white; transition:all 1s;}
#vg4{box-sizing:border-box; height:45px; background:url('https://i.goopics.net/nrlt19.jpg'); background-size:cover; transform:translate(1075px,165px);}
#vg5{box-sizing:border-box; height:45px; background:url('https://i.goopics.net/pk82ql.jpg'); background-size:cover; transform:translate(1075px,240px);}
#vg6{box-sizing:border-box; height:45px; background:url('https://i.goopics.net/yh680s.jpg'); background-size:cover; transform:translate(1075px,315px);}
#vg4:focus,#vg5:focus,#vg6:focus{width:1000px; height:563px; border:4px solid white; transform:translate(0px,0px);}
--></style>