Revealing portions of an image on mouseover

Question

What is the best way to go about having a "fog of war" type thing where an image is blacked out, but then as the user mouses over the image an area around the cursor is revealed. So probably some layer styled with CSS over an image, that as the user mouses over it becomes transparent and so the image can be seen in an area around the mouse, but the rest of the image is still blacked out.

Answer 1

If you just want to use javascript and css to do this:

• Create a black image with a transparent hole in the middle
• Use some javascript to get the mouse position
• Update the css to set the position of the fog image to the mouse pointer

You would have to make sure everything is layered correctly so that your image is under the fog image, and the fog image is under the rest of the content if this does not take up the entire browser window.