[Solved] CSS change img on hover

[nutt318]

Hello,

Well I have been trying to figure out how to do this for the last 3 or so hours with no luck. Was wondering if someone could point out what im doing wrong, or if there is a better way of doing it. Basically what im trying to do is when someone hovers over an image i want it to change from black and white to color.

My html file has:

Code:

My CSS file has:

Code:

#truck { height: 123px; width: 180px; display: block; background: url(images/2b.png) no-repeat center center;}
#truck:hover { height: 123px; width: 180px; display: block; background: url(images/2.jpg) no-repeat center center; z-index: 50;}

anyways, the first image shows up but when I hover over the image it doesnt go to the second one.

Thanks for the help

[TheDoc]

Kill the z-index, you shouldn’t need it in this case.

There’s nothing glaring out at me about why this wouldn’t be working. The only thing you might be able to try is changing how the id is displayed in the CSS from "#truck" to "a#truck".

The reason I suggest it is the :hover has to be related to an anchor tag (I think).

[nutt318]

Well I tried what you said but still no luck. Would there be another way to do this?

HTML

Code:

CSS

Code:

a#truck { height: 123px; width: 180px; display: block; background: url(images/2b.png) no-repeat center center; padding-left: 4px;}
a#truck:hover { height: 123px; width: 180px; display: block; background: url(images/2.jpg) no-repeat center center; padding-left: 4px;}

[nutt318]

Its working now!, When I pasted the code into the forum here there was a funny character where there : is between truck and hover.

Anyways, its working now.

Thanks Doc!

[coryschadt]

Here is another way to do it.

Combine both images into one. That way only one file will need to be loaded and you won’t ever have a flicker effect.

Cheers,

Cory

Code:

a#truck {
display: block;
width: 180px;
height: 123px;
text-decoration: none;
background-image: url(images/truck.jpg);
}

a#truck:hover {
background-position: -123px 0;
}

[Author]

Posts