trapèzes

Montage en 1200x675px avec 4 images horizontales en 1200x675px et 2 verticales en 380x675px.

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

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

<p id="tz1" class="tz">&nbsp;</p>

<p id="tz2" class="tz">&nbsp;</p>

<p id="tz3" class="tz">&nbsp;</p>

<p id="tz4" class="tz">&nbsp;</p>

<p id="tz5" class="tz">&nbsp;</p>

<p id="tz6" class="tz">&nbsp;</p>

</div>

<style><!--

#svl{position:absolute; z-index:1; width:150px; font-size:35px; transform:translate(525px,0px);}

.tz{position:absolute; z-index:1; margin-top:0px; border:8px ridge grey; transition:all 1s;}

#tz1{box-sizing:border-box; width:250px; height:250px; background:url('https://i.goopics.net/lydcis.jpg'); background-size:1200px 675px; background-position:-100px -50px; transform:translate(100px,50px) perspective(200px) rotatex(-30deg);}

#tz2{box-sizing:border-box; width:250px; height:250px; background:url('https://i.goopics.net/xw53n5.jpg'); background-size:1200px 675px; background-position:-100px -350px; transform:translate(100px,350px) perspective(200px) rotatex(30deg);}

#tz3{box-sizing:border-box; width:150px; height:150px; background:url('https://i.goopics.net/73q9rh.jpg'); background-size:380px 675px; background-position:-90px -150px; transform:translate(500px,150px) perspective(200px) rotatex(-30deg);}

#tz4{box-sizing:border-box; width:150px; height:150px; background:url('https://i.goopics.net/kts236.jpg'); background-size:380px 675px; background-position:-90px -350px; transform:translate(500px,350px) perspective(200px) rotatex(30deg);}

#tz5{box-sizing:border-box; width:150px; height:250px; background:url('https://i.goopics.net/tnxxf9.jpg'); background-size:1200px 675px; background-position:-840px -50px; transform:translate(840px,50px) perspective(200px) rotatex(-30deg);}

#tz6{box-sizing:border-box; width:250px; height:250px; background:url('https://i.goopics.net/hwy39n.jpg'); background-size:1200px 675px; background-position:-840px -350px; transform:translate(840px,350px) perspective(200px) rotatex(30deg);}  

#tz1:hover,#tz2:hover,#tz5:hover,#tz6:hover{z-index:5; width:1200px; height:675px; background-position:0px 0px; transform:translate(0px,0px) perspective(5000px) rotatex(0deg);}

#tz3:hover,#tz4:hover{z-index:5; width:380px; height:675px; background-position:0px 0px; transform:translate(410px,0px) perspective(5000px) rotatex(0deg);}  

--></style>

 

SURVOL