fleurs

12 images verticales en 380x675px (16/9) et 6 images horizontales en 1200x675px (16/9). dans un montage en 1200x675px.

 <div style="width:1200px; height:675px; margin: 50px 0 50px -20px;">

<p id="mgh1" class="mgh">&nbsp;</p>

<p id="mgh2" class="mgh">&nbsp;</p>

<p id="mgh3" class="mgh">&nbsp;</p>

<p id="mgh4" class="mgh">&nbsp;</p>

<p id="mgh5" class="mgh">&nbsp;</p>

<p id="mgh6" class="mgh">&nbsp;</p>

<p id="mgv1" class="mgv">&nbsp;</p> 

<p id="mgv2" class="mgv">&nbsp;</p> 

<p id="mgv3" class="mgv">&nbsp;</p>

<p id="mgv4" class="mgv">&nbsp;</p> 

<p id="mgv5" class="mgv">&nbsp;</p> 

<p id="mgv6" class="mgv">&nbsp;</p>

<p id="mgv7" class="mgv">&nbsp;</p> 

<p id="mgv8" class="mgv">&nbsp;</p> 

<p id="mgv9" class="mgv">&nbsp;</p>

<p id="mgv10" class="mgv">&nbsp;</p> 

<p id="mgv11" class="mgv">&nbsp;</p> 

<p id="mgv12" class="mgv">&nbsp;</p>

<p id="sv1">SURVOL</p>

</div>

<style><!--

#sv1{position:absolute; width:200px; font-size:30pt; color:lime; text-shadow:2px 2px black; transform:translate(400px,2px);}  

.mgh{position:absolute; width:1200px; height:675px; border:4px solid white; box-sizing:border-box; margin-top:0px; transition:all 1s;}

#mgh1{background-image:url('https://i.goopics.net/mez3c8.jpg'); transform:translate(20px,-140px) rotate(-20deg) scale(0.25);}

#mgh2{background-image:url('https://i.goopics.net/h12evw.jpg'); transform:translate(0px,-80px) rotate(-20deg) scale(0.25);}

#mgh3{background-image:url('https://i.goopics.net/x2o6qs.jpg'); transform:translate(40px,-40px) rotate(-20deg) scale(0.25);}

#mgh4{background-image:url('https://i.goopics.net/1glu52.jpg'); transform:translate(0px,30px) rotate(-20deg) scale(0.25);}

#mgh5{background-image:url('https://i.goopics.net/r4hwvu.jpg'); transform:translate(40px,70px) rotate(-20deg) scale(0.25);}

#mgh6{background-image:url('https://i.goopics.net/cuy6pv.jpg'); transform:translate(0px,150px) rotate(-20deg) scale(0.25);}

#mgh1:hover,#mgh2:hover,#mgh3:hover,#mgh4:hover,#mgh5:hover,#mgh6:hover{z-index:10; transform:translate(0px,0px) rotate(0deg) scale(1);} 

.mgv{position:absolute; width:380px; height:675px; border:4px solid white; box-sizing:border-box; margin-top:0px; transition:all 1s;}

#mgv1{background-image:url('https://i.goopics.net/n4o92r.jpg'); transform:translate(-20px,-100px) rotate(20deg) scale(0.4);}

#mgv2{background-image:url('https://i.goopics.net/5flrkk.jpg'); transform:translate(-10px,-50px) rotate(20deg) scale(0.4);}

#mgv3{background-image:url('https://i.goopics.net/bwxb3d.jpg'); transform:translate(0px,0px) rotate(20deg) scale(0.4);}

#mgv4{background-image:url('https://i.goopics.net/q8rsxf.jpg'); transform:translate(10px,50px) rotate(20deg) scale(0.4);}

#mgv5{background-image:url('https://i.goopics.net/avzbyj.jpg'); transform:translate(20px,100px) rotate(20deg) scale(0.4);}

#mgv6{background-image:url('https://i.goopics.net/phqsvp.jpg'); transform:translate(30px,150px) rotate(20deg) scale(0.4);}

#mgv7{background-image:url('https://i.goopics.net/1ajikj.jpg'); transform:translate(850px,-100px) rotate(-20deg) scale(0.4);}

#mgv8{background-image:url('https://i.goopics.net/hxs4rg.jpg'); transform:translate(840px,-50px) rotate(-20deg) scale(0.4);}

#mgv9{background-image:url('https://i.goopics.net/vqf4aw.jpg'); transform:translate(830px,0px) rotate(-20deg) scale(0.4);}

#mgv10{background-image:url('https://i.goopics.net/gpbz1d.jpg'); transform:translate(820px,50px) rotate(-20deg) scale(0.4);}

#mgv11{background-image:url('https://i.goopics.net/u8iwpq.jpg'); transform:translate(810px,100px) rotate(-20deg) scale(0.4);}

#mgv12{background-image:url('https://i.goopics.net/8i1r36.jpg'); transform:translate(800px,150px) rotate(-20deg) scale(0.4);} 

#mgv1:hover,#mgv2:hover,#mgv3:hover,#mgv4:hover,#mgv5:hover,#mgv6:hover{z-index:10; transform:translate(0px,0px) rotate(0deg) scale(1);}

#mgv7:hover,#mgv8:hover,#mgv9:hover,#mgv10:hover,#mgv11:hover,#mgv12:hover{z-index:10; transform:translate(820px,0px) rotate(0deg) scale(1);}  

--></style>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

SURVOL