- This topic is empty.
July 30, 2013 at 9:31 am #145195
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?July 30, 2013 at 10:09 am #145198Paulie_DMember
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?July 31, 2013 at 5:55 am #145256
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:
CSS:July 31, 2013 at 6:52 am #145263
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?July 31, 2013 at 7:40 am #145269Paulie_DMember
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.July 31, 2013 at 10:33 am #145280
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?July 31, 2013 at 10:51 am #145281
I just updated itJuly 31, 2013 at 10:51 am #145282
Probem solved Paulie. Tanks for the help.
- The forum ‘CSS’ is closed to new topics and replies.