Reveal part of image on hover

JavaScript
1

Hi,

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

2

http://alistapart.com/article/sprites (no JavaScript required)

3

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
4

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

5

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