Hover Text over Certain Parts of the same Image

Hello there,

I have this single big image with different parts. I would like to add hover text and glow when the student moves his cursor over certain parts. The discussion I read here talks about adding different images and then creating hover states for them. Is it possible to add a single image and add hover states depending on where the cursor is? 

For eg. If I have a single picture of the human body, I would like to add hover text and glow when I move my cursor over the different parts such as hands, chest, nose, etc. The catch here being that is just a single image. Thanks. 

9 Replies
Susi B


sorry to say but no this is not possible. If you insert one image you only can set hover states for the whole image. You have to split the image to have a glow on specific parts. I recommend using png with transparent background, so you don´t have a rectengular hover around the splittet images but around (in your example) only the hand.

Yogesh Pai

Hey, thank you guys for your quick replies. I decided to crop the big image into smaller ones and insert them. It is the long way out and I guess it works fine if your images are all rectangular shaped. I was thinking how we could make it work for non rectangular images, like the example above, parts of the body.