CSS hover image position change

Question

I'm certain it's something super stupid, but I've been stuck for a while, now... So, I have images on a website, and I'd like them to move slightly on hover.

So I have in the HTML:

<a href="someaddress"><img class="thumb" src="somefile"/></a>

And in the CSS:

img.thumb {
    position:relative;
    top:0px;
    background:#333399;

}

img.thumb:hover {
    position:relative;
    top:5px;    
    background:#00CCCC;

}

The backgrounds are there just to see whether something is happening. Actually, the background doesn't change, so the hover is never taken into account. Does anyone have an idea why that could be??

EDIT

Thanks a lot, everyone!

I actually solved it by throwing in a:

a > img.thumb:hover {
position:relative;
top:2px;
}

Which worked. Still not exactly sure why it didn't work just with img.thumb:hover...

Works a treat [here on jsFiddle](http://jsfiddle.net/X9qqu/). Are you sure you are linking your CSS file properly? — George, May 07 '13 at 09:41
It seems to be working, http://jsfiddle.net/K7ttL/ What's the problem? — Okan Kocyigit, May 07 '13 at 09:42

score 1 · Answer 1 · answered May 07 '13 at 09:45

1

Here is the solution.

The HTML:

<div>
<a href="someaddress"><img class="thumb" src="http://www.google.co.in/images/srpr/logo4w.png"/></a>
</div>

The CSS:

img.thumb {
    position:relative;
    top:0px;

}

img.thumb:hover {
    position:relative;
    top:5px;    
    background:#00CCCC;

}

I hope this helps.

answered May 07 '13 at 09:45

Nitesh

15,425
4
48
60

3

Can't see anything different? – Okan Kocyigit May 07 '13 at 09:46
Strange, but a psychological satisfaction and confirmation that there was no thing called an issue that was to be solved. Just satisfied him/her by adding a div and a google image - @ocanal – Nitesh May 07 '13 at 09:53

score 0 · Answer 2 · answered May 07 '13 at 09:46

0

Your code should work, I have checked it here: http://cssdesk.com/XcV2D

Some other styles should be impacting...

answered May 07 '13 at 09:46

Galen

957
5
16

CSS hover image position change

2 Answers2

Linked