jquery-opacity-by-mouse-location

Change an element's opacity based on the mouse's distance from its center.

The idea is to use some jQuery to define an invisible circle around the center point of an element, and to lower the element's opacity as the user's mouse gets closer to its center. The effect works best with an image that is close to square, but it will define the circle within any sized image.

The code is pretty well commented, so I won't spend any time explaining it, otherthan to say you should replace #your_element_id_here at the bottom of the script with your id or class.

I've also put together a quick demo, where I fade a blurred image into an un-blurred version. You can find the demo here.