Art.11.07.21

6 images au ratio 16/9.

SURVOL

******************
<div style="width: 1000px; height: 562PX; margin: 20px auto; text-align: left;">
<p id="fay0">SURVOL</p>
<img id="fay1" class="fay" src="http://ekladata.com/RXxe6tC5behTCfsuGUri5dcQ7dk@1000x562.jpg" alt="" />
<img id="fay2" class="fay" src="http://ekladata.com/0O05BA4dwOJBUighOIN2xseE6f8@1000x562.jpg" alt="" />
<img id="fay3" class="fay" src="http://ekladata.com/LKhTmhXTTKqwU__smTSArsipYAU@1000x562.jpg" alt="" />
<img id="fay4" class="fay" src="http://ekladata.com/m1u62AfgFGGBR1S0RzLwj5dijEA@1000x562.jpg" alt="" />
<img id="fay5" class="fay" src="http://ekladata.com/NrWZK92FCS-77GuNiZFXzGTv7L4@1000x562.jpg" alt="" />
<img id="fay6" class="fay" src="http://ekladata.com/MFtCUFlk4XI499vR57zPWEdH8pQ@1000x562.jpg" alt="" />
</div>
<style><!--
#fay0{position:absolute; z-index:1; width:150px; font-size:30px; transform:translate(250px,0px);}
.fay{position:absolute; z-index:1; width:320px; height:180px;border:4px solid white; transition:all 1s;}
#fay1{box-sizing:border-box; transform:translate(20px,100px) skewy(30deg);}
#fay2{box-sizing:border-box; transform:translate(20px,280px) skewy(30deg);}
#fay3{box-sizing:border-box; transform:translate(340px,100px) skewy(-30deg);}
#fay4{box-sizing:border-box; transform:translate(340px,280px) skewy(-30deg);}
#fay5{box-sizing:border-box; transform:translate(660px,100px) skewy(30deg);}
#fay6{box-sizing:border-box; transform:translate(660px, 280px) skewy(30deg);}
#fay1:hover,#fay2:hover,#fay3:hover,#fay4:hover,#fay5:hover,#fay6:hover{z-index:5; width:1000px; height:562px;transform:translate(0px,0px) skewy(0deg);}
--></style>