Help changing images on :hover

[SamuelNeudeck22]

I need to take a series of images and place them inline across the page and from there make them change to a different image on hover.
there is also supposed to be a link when the image is clicked.
how do you suggest writing my html/css to do this?

[Paulie_D]

There are a lot of ways to do this.

The simplest would be to give each link an ID, add a background image and then just swap out the image when that ID is hovered.

Alternatively, you could add the image inside the link, absolutely position the secondary image and re-position both images on hover.

Without knowing the specific application you intend this for it’s hard to offer the best advice.

Is this a menu, a gallery, is SEO important, what about accessibily?

[SamuelNeudeck22]

Paulie,

The application is just for a runner above the footer that highlights brands sold at the company I’m designing for. as customers rollover the images of their favorite brands the image switches from a grayscale photo to a color photo.

I tried your first example and nothing shows up. my paths for the images are correct:

HTML:

<div id=”brand-runner”>








</div>

CSS:

[SamuelNeudeck22]

the images are in a runner above the footer and highlight major brands sold at this company. when the customer rolls over the image of their favorite brand it turns from a grayscale photo to a color photo.
I tried your first suggestion and assuming image paths are correct. it did not show up on the page. do I have to give height & width to the background images?

[Paulie_D]

Not necessarily but the anchor should be display:block and should have the necessary dimensions to show both images.

Without seeing some code it’s hard to comment further.

Could you make a reduced case in Codepen?

You can use dummy images from lorempixel.com if necessary.

[SamuelNeudeck22]

Okay I created a pen with the dummy images. If I’m doing things right when you rollover the grey image a color image should present itself. it looks like there might be some layering issues?

http://codepen.io/SamuelNeudeck22/showcase

[SamuelNeudeck22]

I just updated it

[SamuelNeudeck22]

Probem solved Paulie. Tanks for the help.

[Author]

Posts