Move link image 5px up on hover

css hover onhover
Amanda picture Amanda · Mar 27, 2011 · Viewed 83.9k times · Source

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

Pekka picture Pekka · Mar 27, 2011

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.

Related questions

div background color, to change onhover

I'm trying to make a div's background color change on mouse over. the div {background:white;} the div a:hover{background:grey; width:100%; display:block; text-decoration:none;} only the link inside the div gets the background color. what could I …

Read More
Changing image on hover with CSS/HTML

I have this problem where I have set an image to display another image when the mouse hovers over, however the first image still appears and the new one doesn't change height and width and overlaps the other one. I'm …

Read More
How to affect other elements when one element is hovered

What I want to do is when a certain div is hovered, it'd affect the properties of another div. For example, in this JSFiddle demo, when you hover over #cube it changes the background-color but what I want is that …

Read More