Zoom Effect on a Product Image

1. Here's a very simple way using CSS transform scale to zoom the image.

2. Here's the same example this time altering the transform-origin property to display the full image.

3. Here is another simple way using jQuery.

4. Here is another way using jQuery's animate method to control the zoom speed.

Sorta what I am after. Maybe I wasnt clear, I am going to have a product which is a smaller image. I need to zoom in on that but at the same time i should be able to move my mouse from one end of the product to the other.

http://www.basspro.com/Bass-Pro-Shops-Johnny-Morris-CarbonLite-Baitcast-Reels/product/1110020501438/ Here is a example

sorry, It was kind of hard to explain. The link is what I need to achieve

You're looking at something along to the lines of drawing a box for the magnifying glass over the images and then expanding that section based on coordinates.

There a multiple map a zoom plugins available for jQuery out there, probably not worth the time to develop a new solution. This was the top hit on my google search, looks pretty decent to me.

possible using css? My project is a bit complex and cant figure out how to implement it.