HTML

<div class="hovergallery45"><img src="https://s-media-cache-ak0.pinimg.com/564x/65/76/5b/65765bbe50bf4c895d0dc92dabaf4ed5.jpg" alt="" width="230" height="250" /><img src="https://s-media-cache-ak0.pinimg.com/564x/c5/34/3a/c5343a62d560ebe5e29c7752d6006771.jpg" alt="" width="230" height="250" /></div>

CSS

.hovergallery45 img{ 
border: 2px solid #fff; 
border-radius: 10px; 
box-shadow: 2px 2px 6px #000000;
-webkit-transform:scale(0.9); 
-moz-transform:scale(0.9); 
-o-transform:scale(0.9);
-webkit-transition: width 3s, height 3s, background-color 3s, 
-webkit-transform 3s;
transition: width 3s, height 3s, background-color 3s, transform 3s;
opacity: 0.8; 
margin:5px 5px 5px 5px; 
}
.hovergallery45 img:hover{
box-shadow: 2px 2px 3px 3px rgba(143, 143, 143, 0.3);
border: 1px dotted #000;
border-radius: 30px;
opacity: 1;
-moz-transform: translate3d(-10%, 10%, 0); /* position :before pseudo element past left edge of layout initially */
 -webkit-transform: translate3d(-10%, 10%, 0);
 transform: translate3d(-10%, 10%, 0);

}