Exemple 214

 6 images au ratio 16/9.

<div style="width: 1600px; height: 900px; margin: 5px auto;">
<p id="per0">Empilage de lingots... comme &agrave; la maison ! Survol de chacun.</p>
<p id="per1" class="per">&nbsp;</p>
<p id="per2" class="per">&nbsp;</p>
<p id="per3" class="per">&nbsp;</p>
<p id="per4" class="per">&nbsp;</p>
<p id="per5" class="per">&nbsp;</p>
<p id="per6" class="per">&nbsp;</p>
</div>
<style><!--
#per0{position:absolute; z-index:1; width:1600px; font-size:30px;}
.per{position:absolute; z-index:1; width:500px; height:900px; border:6px ridge white; transition:all 1s linear;}
#per1{box-sizing:border-box; background:url('http://ekladata.com/1RerrAO3xoYcHa_ixtaV-aRksjM.jpg'); background-size:1600px 900px; background-position:-30px 0px; transform-origin:bottom center; transform:translate(30px,0px) perspective(500px) rotatex(45deg);}
#per2{box-sizing:border-box; background:url('http://ekladata.com/nZQS94h2G7TBfUWJrWc1xDYUa2Q.jpg'); background-size:1600px 900px; background-position:-530px 0px; transform-origin:bottom center; transform:translate(530px,0px) perspective(500px) rotatex(45deg);}
#per3{box-sizing:border-box; background:url('http://ekladata.com/GLurwefGNl6cqy2pJocFxzlVrLM.jpg'); background-size:1600px 900px; background-position:-1030px 0px; transform-origin:bottom center; transform:translate(1030px,0px) perspective(500px) rotatex(45deg);}
#per4{box-sizing:border-box; background:url('http://ekladata.com/D3ysufOsCj06ZU5AfAKRxv7ZQ7s.jpg'); background-size:1600px 900px; background-position:-280px 0px; transform-origin:bottom center; transform:translate(280px,-280px) perspective(500px) rotatex(45deg);}
#per5{box-sizing:border-box; background:url('http://ekladata.com/Qd4KzIq0GR71trpslMM_c9QJHfk.jpg'); background-size:1600px 900px; background-position:-780px 0px; transform-origin:bottom center; transform:translate(780px,-280px) perspective(500px) rotatex(45deg);}
#per6{box-sizing:border-box; background:url('http://ekladata.com/zxrp7cIefQKyWFQyg2QyaPDD4L0.jpg'); background-size:1600px 900px; background-position:-530px 0px; transform-origin:bottom center; transform:translate(530px,-560px) perspective(500px) rotatex(45deg);}
#per1:hover,#per2:hover,#per3:hover,#per4:hover,#per5:hover,#per6:hover{z-index:5; width:1600px; height:900px; background-position:0px 0px;transform:translate(0px,0px) perspective(5000px) rotatex(0deg);}
--></style>