Flip

code
<div id="montage">
<div id="card">
<div id="arriere"><img src="http://ekladata.com/bGM1EZulJmOt0TmY59yEzkSvfZc/5466.jpg" alt="" /></div>
<div id="avant"><img src="http://ekladata.com/JUPG_bnCEwEEfz71B2B9RoMn884/5470.jpg" alt="" /></div>
</div>
</div>
<style type="text/css"><!--
#montage{width:600px; height:400px; margin:10px auto ;}
#card {transform: preserve-3d perspective: 1000; width: 600px; height: 338px; position: relative;}
#arriere, #avant {
position: absolute; backface-visibility: hidden; transition: transform 1s ease-in; width: 100%; height: 100%;  padding: 20px;
box-shadow: inset 0px 0px 20px rgba(0,0,0,0.4), 4px 4px 8px black; border-radius: 14px;}
#arriere {transform: rotateY(180deg); overflow: hidden;}
#avant {background: #grey;}
#montage:hover #arriere {transform: rotateY(0deg);}
#montage:hover #avant {transform: rotateY(-180deg);}
--></style>
...
Mes photos font 600x338px à modifier à la taille des vôtres; mon montage est centré dans la page; l'encadrement gris est généré par la ligne padding:20px; à modifier selon vos goûts.