DOM magnifying glass

Asked by At

I'm looking to create a magnifying effect similar to here: https://thdoan.github.io/magnify/demo.html There's a lot of libraries that do this, but they all work on images. I need regular DOM elements to be zoomable.

I tried to use an image and another larger version of that image as in the demo, only displaying the larger image inside of the "magnifier". This doesn't work, as there are text elements in the image that need to change dynamically.

Using a canvas approach would require rebuilding a lot of complex DOM elements in canvas, which I'd rather avoid, especially because it would become a lot harder to make changes to the layout then. Same goes for webGL.

Another possible option would be to duplicate the zoomable div, scale it up, and use the magnifier as a mask on that div. This would complicate things as I would then have to duplicate all changes to both divs.

Is there any other option I haven't thought of?

0 Answers