image appear over other image on hover over

Question

I am trying to create an image map where there is one main image, and when you hover over certain areas different images come up.

Something like this How to apply Hovering on html area tag? but instead of creating an outline it would show different images.

I do not want to usse jQuery and would prefer to rely on CSS and HTML.

Thanks in advance.

any suggestions @enhzflep ? – Pussinbikerboots Dec 15 '15 at 05:10 — Pussinbikerboots, Dec 15 '15 at 05:10

score 0 · Answer 1 · answered Dec 15 '15 at 03:31

0

You could cover smaller blank images over the large main image and use the hover code separately for each image

The non hover image is a "blank" png and the hover is the desired result Just use the code for each "blank" image with the main image in the background with z-index of "0"

answered Dec 15 '15 at 03:31

Koden

353
1
13

and by "blank" I mean completely transparent – Koden Dec 15 '15 at 03:33
that sounds good...as a newbie to coding I'm getting lost in the css...this bit in particular – Pussinbikerboots Dec 15 '15 at 05:04

score 0 · Answer 2 · answered Dec 15 '15 at 05:26

As said in previous answer, you could do this by using the z-index property. But try setting the main image's z-index as 0, and all small images(that you want to show over main image) as lower than 0.

And finally, activate by swapping the z-index between values lower or higher than 0 on mouse hover.

Hope this helps :)

image appear over other image on hover over

2 Answers2