Move link image 5px up on hover

Question

How would I go about acheiving an effect similar to that on this site's portfolio page Solid Giant, with CSS and HTML?

I had thought that just putting something like this would work:

a img{     margin-top: 5px; }  a img:hover{     margin-top: 0px; } 

But it did not work, even if I put the :hover on the link instead of the img. I scoured his code and css but I could not for the life of me figure this out. Help please :)

Answer 1

position: relative would work:

a img:hover{ position: relative;               top: -5px;}  

note that position: relative reserves the space in the document flow as if the element were not moved. But I think in this case, that is not an issue.

Answer 2

Also see translate():

http://www.w3schools.com/css/css3_2dtransforms.asp

img:hover {     -moz-transform: translate(-2px, -2px);     -ms-transform: translate(-2px, -2px);     -o-transform: translate(-2px, -2px);     -webkit-transform: translate(-2px, -2px);     transform: translate(-2px, -2px) } 

See a similar working example:
http://jsfiddle.net/rimian/7aPvS/1/