Reveal part of image on hover


I want to try and implement an interactive effect using jquery or javascript. The idea is to have a large background image with different words about a business. This background image will be darkened out but the mouse hover will act like a light to reveal a defined area around the mouse cursor.

I’m not sure if i’m on the right track but my general idea is to have a background image with a fully opaque image infront of it with its opacity set to 1. On mousehover, the opacity of the image will change within a defined radius of the mouse hover.

Can anyone tell me how a good way to achieve this?

Many thanks (no JavaScript required)

Not sure if something like this is what you are looking for?

(I did an old demo years ago but its just a trick and not usable in real life.)

1 Like

Yes! Thank you very much. That’s very close to what I was looking.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.