Search code examples
csshoveronhover

Move link image 5px up on hover

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 :)

Solution

  • 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.