What I want to do is when a mouse goes over a image  I want to increase it's height and width to make it bigger but will make the div be as big as the webpage.  The mouse needs to stay over the image. If it goes out there's a timer which will delay resizing the image and the div back to it's original size. 

The whole point of this is to design the gallery so that when your mouse hovers over the images It will expand and make it look bigger. If the mouse no longer is over the image. It will resize the image and the div back to it's original size. It's just there to magnify the image when looking thru it. I know this is a very common feature in most websites. 

I have the feature coded but not working as I want it to. 

So,  what I have is a  square div box. This is more like a rectangle. Where it's height is greater then it's width. So, it's longer going up and down. Next to it I have buttons one goes up and the other goes down.

When you press these buttons it adds or subracts 50px to the top value of the images.  So, you can scroll thru the images. You can view 3 at a single time.

I have it where mouseover the images when triggered it will increase the images sizes and will make the div as big as the webpage.

Here's where the problem lies. When it makes this transition  I need the image to be reolocated to here the mouse is at when the div resizes.  The reason is that I have it setup that if the mouse isn't over the image it will start to resize the image and div back to it's original size.

So, right now what happens is that it resizes the image and the div but when it does the image gets positioned away from my mouse and then quickly the image and div gets resized back to the original size.

I need to tell the image to go to where the mouse is located at the time when a mouseover was triggered. I don't want the image to stick ore keep moving with the mouse.

The mouse has to leave the image in order to start the resizing back to the original sizes. 

I need example code as to how to reposition the image that had the mouse over it. If I reposition it how do I set the original positions back?  I am guessing grab the left and top value first and put  it in an array.  Then use those values to set it back. 

Yet, how do I position the image at the resize to the mouse x and y location referenced inside the div. Do, I have to use the offset function and subtract that from my mouse x and y values? 

Do, note that my buttons that scroll up and down  add and subtract the top values. So, if the images were scrolled up and down before hovering the mouse over the image. It will be displayed differently inside the div when it scales up.  So, each time I do this it shows the images in a different position and some even go off screen..meaning out of the div and not be visible anymore. 

Any ideas?