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.