06a.10.2024

Montage en 1200px par 675px, avec 6 images au ratio 16/9 horizontales.

On peut facilement le transformer en images 16/9 verticales (380px par 675px) ou mélanger les deux types.

SURVOL

 

 

 

 

 

 

---

<div style="width: 1200px; height: 675px; margin: 50px auto; text-align: left;">

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

<p id="cad1" class="cad">&nbsp;</p>

<p id="cad2" class="cad">&nbsp;</p>

<p id="cad3" class="cad">&nbsp;</p>

<p id="cad4" class="cad">&nbsp;</p>

<p id="cad5" class="cad">&nbsp;</p>

<p id="cad6" class="cad">&nbsp;</p>

</div>

<style><!--

#cad0{ position:absolute; z-index:1; width:200px;text-align:center; font-size:30px; color:green; text-shadow:2px 2px black; transform:translate(500px,315px);}

.cad{position:absolute; z-index:1; margin-top:0px; width:400px; height:675px; border:4px solid white; transition:all 1s;}

#cad1{box-sizing:border-box; transform-origin:top center; background:url('http://ekladata.com/KwtZmTalkh71MslTW03Cxx_7NnY.jpg'); background-size:1200px 675px; background-position:0px 0px; transform:translate(0px,0px) perspective(200px) rotatex(-20deg);}

#cad2{box-sizing:border-box; transform-origin:top center; background:url('http://ekladata.com/9LmWz6Ty84uCTbWJhbgXR0l3izA.jpg'); background-size:1200px 675px; background-position:-400px 0px; transform:translate(400px,0px) perspective(200px) rotatex(-20deg);}

#cad3{box-sizing:border-box; transform-origin:top center; background:url('http://ekladata.com/kTH1vSHN9lHhsTUbcfljq5rtZLI.jpg'); background-size:1200px 675px; background-position:-800px 0px; transform:translate(800px,0px) perspective(200px) rotatex(-20deg);}

#cad4{box-sizing:border-box; transform-origin:bottom center; background:url('http://ekladata.com/0w9bYT5zsqYXlgXcerLkjz1rocY.jpg'); background-size:1200px 675px; background-position:0px 0px; transform:translate(0px,0px) perspective(200px) rotatex(20deg);}

#cad5{box-sizing:border-box; transform-origin:bottom center; background:url('http://ekladata.com/2ID1EvwHrzJLz38E4iadcnLMOTs.jpg'); background-size:1200px 675px; background-position:-400px 0px; transform:translate(400px,0px) perspective(200px) rotatex(20deg);}

#cad6{box-sizing:border-box; transform-origin:bottom center; background:url('http://ekladata.com/RE4FqTe5TAYOlSpZRYMpYc1T_eU.jpg'); background-size:1200px 675px; background-position:-800px 0px; transform:translate(800px,0px) perspective(200px) rotatex(20deg);}

#cad1:hover,#cad2:hover,#cad3:hover,#cad4:hover,#cad5:hover,#cad6:hover{z-index:5; width:1200px; height:675px; background-position:0px 0px; transform:translate(0px,0px) perspective(2000px) rotate(0deg);}

--></style>