Mosaic Test

by AaronLayton

HTML

<div>
    <a href="#"><img src="http://www.designpreview.co.uk/2012/aaron/hover-img.jpg"></a>
</div>

CSS

body{ text-align:center; }

div { margin:100px;}
a{ 
    display:inline-block;
    overflow:hidden;
    position:relative;
    -webkit-transition:all 0.2s ease-in;  
   -moz-transition:all 0.2s ease-in;  
   -o-transition:all 0.2s ease-in;  
   transition:all 0.2s ease-in;  
}
a img { 
    margin:-57px;
    -webkit-transition:all 0.2s ease-in;  
   -moz-transition:all 0.2s ease-in;  
   -o-transition:all 0.2s ease-in;  
   transition:all 0.2s ease-in; 
}
a:hover {
    top:-57px;
    -webkit-transition:all 0.2s ease-in;  
   -moz-transition:all 0.2s ease-in;  
   -o-transition:all 0.2s ease-in;  
   transition:all 0.2s ease-in; 
    
}
a:hover img { 
    margin:0px;
}