image 'pan' on hover zoom

I have found the right code to zoom my images on hover easy enough. I am, however, struggling to figure out how to make the zoom point follow the curser as you move it across the image.

here is an example of what i am after: https://t-o-o-g-o-o-d.com/carhartt-wip

Any ideas or help would be very much appreciated!

Claudia

Hi Claudia,

You can do this with the Magic Zoom extension for Squarespace:

https://www.magictoolbox.com/magiczoom/modules/squarespace/

After installing it, set the zoom position to inner. The code would look similar to this:

<a href="large.jpg" class="MagicZoom" data-options="zoomPosition: inner"><img src="small.jpg"></a>

David

I've been trying to figure this out too. I don't know much about coding, but what I discovered is this...

1. Such a feature requires HTML, CSS, AND Javascript 

2. Need Premium account to embed Javascript or iframes. Basic plan only allows you to add custom CSS or use the code block for HTML and CSS.

My needs don't require all that the premium plan offers so I gave up on this feature. However, if you DO have the premium plan this tutorial may help: https://www.w3schools.com/howto/howto_js_image_magnifier_glass.asp

If you do NOT have the premium, the work around I ended up using based on my needs is just copying the image address and linking the image to open to a new window when clicked on which allows zooming.