Changing image based on mouse position

I'm trying to create an image on a webpage that will change in relation to the cursor position.

http://ift.tt/1AK99eL

please see the above image for a visual discription of what I want.

the website I'm working on is OYMYO, most of the code is a bit of a mess but i have a little understand of HTML & CSS.

I was thinking of perhaps using hover images in DIV layers to resolve this but cannot for the life of me figure out a place to start.

Also, the rest of the page will still need to have interactive content so this all needs to not affect the rest of the page.

Any help would be greatly appreciated, if you need any elaboration please let me know. Thanks

P