CSS3transition effect it looks like the images is just revolved.
The image is used is this one
background: url('Image_URL') no-repeat;
background-position: 0px -50px;
moz-transition: all .3s ease-in-out;
o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
webkit-transition: all .3s ease-in-out;
background-position: 0 0;
The above CSS the element (bloggerever) have a
widthof 50px and
heightof 50px because of that it shows the portion of 50 by 50px but,the
background-positionis set to minus 50px on vetical position because the image have the coloured area at upper and black and white at lower.But on hover the background vertical position is changed to 0 thats the secret behind this.One more point that,if you want to add a link then
atag should have the same size as the image and should have text-indent of negative figure so that the text do not show in it,as I did above.
<a href="LINK" target="_blank"></a>