Exemple 118

 3 images au ratio 16/9 à survoler.

<div style="width: 60vw; height: 33.75vw; margin: 1vh auto; ">
<p id="try1" class="try">&nbsp;</p>
<p id="try2" class="try">&nbsp;</p>
<p id="try3" class="try">&nbsp;</p>
</div>

<style><!--
.try{position:absolute; z-index:1; box-sizing:border-box; height:25vw; border:0.4vh ridge grey; transition:all 1s linear;}
#try1{width:13vw;background:url('http://ekladata.com/Eu3Z0Wk736-oGHH6wrAlhbp3qXo.jpg'); background-size:60vw 33.75vw; background-position:-7vw -3vw; transform:translate(7vw, 3vw) perspective(15vw) rotatey(10deg); transform-origin:right center;}
#try2{width:20vw;background:url('http://ekladata.com/Yhz6aRNVam8n0dIW8FHEjSnkYlk.jpg'); background-size:60vw 33.75vw; background-position:-20vw -3vw; transform:translate(20vw, 3vw);}
#try3{width:13vw;background:url('http://ekladata.com/hjv9B4yVupHEl-ctr5YnzjpBqg8.gif'); background-size:60vw 33.75vw; background-position:-40vw -3vw; transform:translate(40vw, 3vw) perspective(15vw) rotatey(-10deg); transform-origin:left center;}
#try1:hover, #try2:hover,#try3:hover{z-index:5; width:60vw; height:33.75vw; background-position:0vw 0vw;transform:translate(0vw,0vw) perspective(100vw) rotatey(0deg);}
--></style>