Art.13.6.21

 5 images au ratio 16/9.

<div style="position: relative; overflow: hidden; width: 1000px; height: 562px; margin: 20px auto; border: 1px solid black; background: url('http://ekladata.com/qtaWnw6Qm7X5LdmEDolqsHpqog0.jpg'); background-size: cover;">
<p id="rev0">SURVOL</p>
<p id="rev1" class="rev">&nbsp;</p>
<p id="rev2" class="rev">&nbsp;</p>
<p id="rev3" class="rev">&nbsp;</p>
<p id="rev4" class="rev">&nbsp;</p>
</div>
<style><!--
#rev0{position:absolute; z-index:1; width:150px; font-size:25px; color:white; text-shadow:2px 2px black; transform:translate(425px,10px);}
.rev{position:absolute; z-index:1; width:300px; height:300px; border:4px solid white; transition:all 1s;}
#rev1{box-sizing:border-box; background:url('http://ekladata.com/72GQ8gnarUskyut3Oxzc0n1cdxo.jpg'); background-size:1000px 562px; transform:translate(-150px,-150px) rotate(45deg);}
#rev2{box-sizing:border-box; background:url('http://ekladata.com/2RIbHScR9ueWPfIywNrRIwNWhnA.jpg'); background-size:1000px 562px; transform:translate(850px,-150px) rotate(45deg);}
#rev3{box-sizing:border-box; background:url('http://ekladata.com/4U06vx_Tp3IrulCojygFHcR7HEM.jpg'); background-size:1000px 562px; transform:translate(850px,410px) rotate(45deg);}
#rev4{box-sizing:border-box; background:url('http://ekladata.com/23RBBPp5joGhQAEDyD-2O_41okQ.jpg'); background-size:1000px 562px; transform:translate(-150px,410px) rotate(45deg);}
#rev1:hover,#rev2:hover,#rev3:hover,#rev4:hover{z-index:5; width:1000px; height:562px; transform:translate(0px,0px) rotate(0deg);}
--></style>