BounceIn

HTML

<div class="hovergallery3">
<img src="http://gif" width="155" height="180" /><imgre src="http://gif" width="155" height="180" /> </div>

CSS

<style type="text/css"><!--
/*GloriaV */
/*URL: http://tutorialgloriav.eklablog.com/*/
 .hovergallery3 img{ -webkit-transform:scale(0.8);
 border-radius: 5%;
 border: 1px dotted #000;
 -moz-transform:scale(0.8);
 -o-transform:scale(0.8);
 -ms-transform:scale(0.8);
 -webkit-transition-duration: 0.5s;
 -moz-transition-duration: 0.5s;
 -o-transition-duration: 0.5s;
 -ms-transition-duration: 0.5s;opacity: 0.7; /*Nivel de opacidad de las imágenes*/margin: 0 10px 5px 0; /*Margen entre las imágenes*/
 box-shadow:0px 2px 10px #000;
 }.hovergallery3 img:hover{ 
opacity: 0,7; -webkit-transform: scale(.3); }
 50% { -webkit-transform: scale(1.05); }
 70% { -webkit-transform: scale(.9); }
 100% { opacity: 1; -webkit-transform: scale(1); }
}
 0% { opacity: 0,7; -moz-transform: scale(.3); }
 50% { -moz-transform: scale(1.05); }
 70% { -moz-transform: scale(.9); }
 100% { opacity: 1; -moz-transform: scale(1); }
}
 0% { opacity: 0,7; -o-transform: scale(.3); }
 50% { -o-transform: scale(1.05); }
 70% { -o-transform: scale(.9); }
 100% { opacity: 1; -o-transform: scale(1); }
}
 0% { opacity: 0,7; transform: scale(.3); }
 50% { transform: scale(1.05); }
 70% { transform: scale(.9); }
 100% { opacity: 1; transform: scale(1); }
}
 </style>