create a magnifying glass to read the different regions of an image

Basic setup to get something like this working..

- Add the image to 2 layers.. 1 small sized and 1 in the zoomed-in larger size.
- Use a clip-path to mask the bigger layer to a circle. Check https://bennettfeely.com/clippy/ Something like this will be the result
clip-path: circle(20% at 50% 50%);
- Then you need to ensure the upper layer.. the one with the clip-path moves/drags along when moving. I advice using GSAP Draggable for that.

Code pen sample here:
https://codepen.io/creme/pen/gOYrvxM

or this one...
https://malaman.github.io/js-image-zoom/example/basic.html

Solutions for this are plenty.
https://www.w3schools.com/howto/howto_js_image_zoom.asp