Grow your CSS skills. Land your dream job.

[Solved] CSS change img on hover

  • # February 6, 2010 at 2:23 pm

    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

    # February 6, 2010 at 4:11 pm

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

    # February 6, 2010 at 5:16 pm

    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;}
    # February 6, 2010 at 5:22 pm

    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!

    # February 6, 2010 at 7:10 pm

    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;
    }

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".