HTML

<div class="hovergallery8"><img src="http://gif" alt=" " width="190" height="210" /><img src="http://gif" alt=" alt=" width="190" height="210" /></div>

CSS

.hovergallery8 img { 
 margin: 10px 10px 10px 10px; 
border-radius: 10%;
box-shadow:1px 1px 10px #000;
border: 1px dotted #000; 
-moz-transform:scale(0.4);
-o-transform:scale(0.4);
-ms-transform:scale(0.4);

}
.hovergallery8 img:hover {
-moz-transform: translate3d(0, 10%, 0); /* position :after pseudo element at bottom of layout initially */
 -webkit-transform: translate3d(0, 10%, 0);
 transform: translate6d(0, 10%, 0);
}
 
figure.dualpanels:hover::before{
 -moz-transform: translate3d(0, -10%, 0);
 -webkit-transform: translate3d(0, -10%, 0);
 transform: translate3d(0, -10%, 0);
 -moz-transition: all 0.3s;
 -webkit-transition: all 0.3s;
 transition: all 0.3s;
 -moz-transition-delay: 0.3s;
 -webkit-transition-delay: 0.3s;
 transition-delay: 0.3s;
}