06.10.2024

Montage en 1200x675px, pour 1+6 images en 16/9.

Clic vignettes.

 

---

<div style="width: 1200px; height: 675px; margin: 50px auto; text-align: left;"><input id="dm1" class="dm" type="text" /> <input id="dm2" class="dm" type="text" /> <input id="dm3" class="dm" type="text" /> <input id="dm4" class="dm" type="text" /> <input id="dm5" class="dm" type="text" /> <input id="dm6" class="dm" type="text" />

<p id="ct0">Clic vignettes.</p>

<p id="ct1">&nbsp;</p>

</div>

<style><!--

#ct0{position:absolute; z-index:1; width:200px; text-align:center; font-size:25px; transform:translate(500px,10px);}

#ct1{position:absolute; z-index:1; width:1000px; height:563px; margin-top:0px; border:6px ridge grey; transform:translate(94px,60px); background:url('http://ekladata.com/g1QewJTFJKl550FrPm67d-qPVxk.jpg'); background-size:cover;}

.dm{position:absolute; z-index:5; width:300px; height:168px; border:6px ridge grey;transition:all 1s;}

#dm1{ background:url('http://ekladata.com/nmDaB3ix4yRYMy-Qpmg7-WyM3Jk.jpg'); background-size:cover; transform-origin:center left; transform:translate(20px,50px) perspective(200px) rotatey(60deg);}

#dm2{ background:url('http://ekladata.com/jqDTYIPAMfyK-nrJieLKupqScAQ.jpg'); background-size:cover; transform-origin:center left; transform:translate(20px,250px) perspective(200px) rotatey(60deg);}

#dm3{ background:url('http://ekladata.com/0AjQudMqo5V1MuARt7i4fXyG3-U.jpg'); background-size:cover; transform-origin:center left; transform:translate(20px,450px) perspective(200px) rotatey(60deg);}

#dm4{ background:url('http://ekladata.com/j_rrgjWO81WuU8TNHDuj6Cr6Z1k.jpg'); background-size:cover; transform-origin:center right; transform:translate(865px,50px) perspective(200px) rotatey(-60deg);}

#dm5{ background:url('http://ekladata.com/BRrziJJ_Lm2FAolR562au1h8gs0.jpg'); background-size:cover; transform-origin:center right; transform:translate(865px,250px) perspective(200px) rotatey(-60deg);}

#dm6{ background:url('http://ekladata.com/9gstoXr4S28oCIDxeksheR6G4I4.jpg'); background-size:cover; transform-origin:center right; transform:translate(865px,450px) perspective(200px) rotatey(-60deg);}  

#dm1:focus,#dm2:focus,#dm3:focus,#dm4:focus,#dm5:focus,#dm6:focus{width:1000px; height:563px; transform:translate(94px,60px) perspective(2000px) rotatey(0deg);}

--></style>