09.12.23

 4 images "verticales" en 380x675px, au ratio 16/9.

<div style="width: 380px; height: 675px; margin: 30px auto; text-align: left; border: 1px solid black;">
<p id="vt0">SURVOL</p>
<p id="vt1" class="vt">&nbsp;</p>
<p id="vt2" class="vt">&nbsp;</p>
<p id="vt3" class="vt">&nbsp;</p>
<p id="vt4" class="vt">&nbsp;</p>
</div>

<style><!--
#vt0{position:absolute; z-index:1; width:30px; height:150px; transform:translate(180px,220px); font-size:30px;}
.vt{position:absolute; z-index:1; width:380px; height:675px; background-size:cover; border:4px solid white; transition:all 1s;}
#vt1{box-sizing:border-box; background:url('http://ekladata.com/9eaqmrACgkSBue7fiYZgNLswEdY.jpg'); transform:translate(0px,0px) perspective(200px) rotatey(41deg); transform-origin:center left;}
#vt2{box-sizing:border-box; background:url('http://ekladata.com/SaLI8mmbOH2UkYKDJcwmDSUW3Fs.jpg'); transform:translate(0px,0px) perspective(200px) rotatey(-41deg); transform-origin:center right;}
#vt3{box-sizing:border-box; background:url('http://ekladata.com/H0xcbe8uhUXVInKdsLgwEwc4k8I.jpg'); transform:translate(0px,0px) perspective(200px) rotatex(-35deg); transform-origin:center top;}
#vt4{box-sizing:border-box; background:url('http://ekladata.com/Xsu6H6u8PrFiKOnaWbGzgkyq2LM.jpg'); transform:translate(0px,0px) perspective(200px) rotatex(35deg); transform-origin:center bottom;}
#vt1:hover,#vt2:hover,#vt3:hover,#vt4:hover{z-index:5;transform:translate(0px,0px) perspective(2000px) rotate(0deg);
--></style>