HTML

<div class="hovergallery4">
<img src="https://lh4.googleusercontent.com/-1AO_SM493Kk/VQccdh2zI6I/AAAAAAABfzI/fSm_WXbKdMg/w294-h298-no/1-294x298.gif"width="175" height="220" /><img src="http://bestgif.su/_ph/23/2/884911976.gif?1427282923"width="175" height="220" /> </div>

CSS

<style type="text/css"><!--
/*GloriaV */
/*URL: http://tutorialgloriav.eklablog.com/*/
.hovergallery4img{ -webkit-transform:scale(0.8);
 border-radius: 12% /22%;
border: 1px dotted #000;
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-ms-transform:scale(0.8);
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;opacity: 0.6; /*Nivel de opacidad de las imágenes*/margin: 2px 3px 3px 2px; /*Margen entre las imágenes*/
box-shadow:1px 1px 7px #000;
}.hovergallery4img:hover{
-webkit-box-shadow:3px 2px 10px #000;
-moz-box-shadow:3px 2px 10px #000;
-ms-box-shadow:3px 2px 10px #000; 
 /* Animation Effect - effectRotateInUpLeft */
 -webkit-transform-origin: left bottom;
 transform-origin: left bottom;
 -webkit-transform: rotate(10deg);
 transform: rotate(10deg);
 opacity: 0,7;
 }
 -webkit-transform-origin: left bottom;
 transform-origin: left bottom;
 -webkit-transform: rotate(0);
 transform: rotate(0);
 opacity: 1;
 }
}
 -webkit-transform-origin: left bottom;
 -ms-transform-origin: left bottom;
 transform-origin: left bottom;
 -webkit-transform: rotate(10deg);
 -ms-transform: rotate(10deg);
 transform: rotate(10deg);
 opacity: 0,7;
 }
 -webkit-transform-origin: left bottom;
 -ms-transform-origin: left bottom;
 transform-origin: left bottom;
 -webkit-transform: rotate(0);
 -ms-transform: rotate(0);
 transform: rotate(0);
 opacity: 1;
 }
</style>