Art.29A.5.21

 4 images au ratio 16/9.

<div style="width: 1000px; height: 562px; margin: 20px auto; border: 1px solid black; text-align: left; background: white;">
<p id="tr1" class="tr">&nbsp;</p>
<p id="tr2" class="tr">&nbsp;</p>
<p id="tr3" class="tr">&nbsp;</p>
<p id="tr4" class="tr">&nbsp;</p>
<p id="tr5">SURVOL</p>
</div>
<style><!--
.tr{position:absolute; z-index:1; width:1000px; height:562px; transition:all 1s linear;}
#tr1{background:url('http://ekladata.com/EVRlW5jBIbwqvlX_aK6rChZEBf8@1000x562.jpg'); background-size:1000px 562px; clip-path:polygon(0% 0%, 30% 31%, 30% 31%, 0% 100%);}
#tr2{background:url('http://ekladata.com/1Hrr2u8wbcC2E27F1PYCgXmLx9I@1000x562.jpg'); background-size:1000px 562px; clip-path:polygon(32% 33%, 32% 33%, 95% 100%, 3% 100%);}
#tr3{background:url('http://ekladata.com/qMjJD6tFsuP0HbHSSPStMh_fMMM@1000x562.jpg'); background-size:1000px 562px; clip-path:polygon(5% 0%, 96% 0%, 60% 57%, 60% 57%);}
#tr4{background:url('http://ekladata.com/2qK3X_jMlXwAk7GaX2g9UVpIRFs@1000x562.jpg'); background-size:1000px 562px; clip-path:polygon(62% 60%, 100% 0%, 100% 100%, 62% 60%);}
#tr5{position:absolute; z-index:1; width:100px; font-size:20px; transform:translate(100px,60px) rotate(30deg);}
#tr1:hover,#tr2:hover,#tr3:hover,#tr4:hover{z-index:5; clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
--></style>