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

score 43 · Accepted Answer · answered Mar 27 '11 at 11:54

43

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.

answered Mar 27 '11 at 11:54

Pekka

442,112
142
972
1,088

3

+1 for the information on `position: relative`. Didn't know that. – Wex Jan 06 '12 at 23:43
3

add padding-bottom: 5px to get rid of 'flicker' – Aidan Ewen Jan 03 '13 at 16:07
You should definitely go with [the `translate` solution, as it is hardware-accelerated via the GPU](https://web.dev/animations-guide/). – Andy Jul 25 '22 at 11:40

score 18 · Answer 2 · answered Mar 10 '14 at 10:50

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/

score 0 · Answer 3 · edited Nov 03 '12 at 17:17

0

You could also use CSS/HTML5 animations: http://slides.html5rocks.com/#css-animation

you could also wrap it in another parentdiv that has position:relative set:

<div class="parent">
  <img class="image" />
</div>

.parent { 
    position:relative; 
}
.image { 
    position:absolute; 
    top:0px; 
    left:0px; 
}
.image:hover { 
    top:-15px; 
}

edited Nov 03 '12 at 17:17

Community

1
1

answered Mar 27 '11 at 11:59

Senica Gonzalez

7,996
16
66
108

score -1 · Answer 4 · edited Jul 26 '22 at 05:16

-1

you can use id

in HTML

<div id="move"> </div>

in CSS

#move {
position: relative;
top: 0;
transition: top ease 1s;
}
#move:hover {
top: -5px;
}

note: transition didn't work when I tried and if you don't use js in your code there's really no point in using id.

edited Jul 26 '22 at 05:16

dpo222

11
7

answered Aug 21 '21 at 05:26

mansouri-Q

1
4

score -2 · Answer 5 · answered Mar 27 '11 at 12:02

-2

Give the image an id:

<img id="imgHover" src="" />


 #imgHover:hover { margin-top: -5px; }

answered Mar 27 '11 at 12:02

Lauw

1,715
11
12

score -2 · Answer 6 · answered Jan 06 '12 at 23:29

-2

Make sure you have this in your html so IE knows how to work properly

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

answered Jan 06 '12 at 23:29

Doug

11

Move link image 5px up on hover

6 Answers6

Linked