Center a DOM element on mouse cursor

I have some code that is resizing the size of a DOM element during a mouse scroll event. What needs to happen is that the element needs to track with the position of the mouse cursor. so the point location of the element where the mouse cursor is positioned should stay the same after the resize has occurred.

the following code works to always center the element on the mouse cursor, which is close, but not exactly the behavior i am looking for

var positionLeft = e.clientX - img.offset().left - (img.realWidth()  / 2);
var positionTop = e.clientY - img.offset().top - (img.realHeight() / 2);
img.css('left', positionLeft);
img.css('top', positionTop);

I don't really see what is the point for this, but I created a jsFiddle that will center a DOM element on (under) the mouse cursor.

Link: http://jsfiddle.net/UEQCW/