Overlay a magnification within a specific shape?

so hopefully i can explain what i want to do correctly. I want to have a big background image and on top of that image a shape which has a magnification of the image below. As though you were putting a magnifiying glass over it.

Obviously i could create this in photoshop and have it as 1 flat image but i am hoping to automate it somehow so that you just upload the background image and everything else is done for me.

Does this sound possible. How would i go about doing something like this?

I could understand how to do it with a square for example but the shape i want is more complex


A css transform or background-size can blow-up an image.

That would require some kind of mask. Possibly an svg with clipping path.

1 Like

ah so an SVG can knock out bits with a mask. I’ll have a look and see how they work. Never used an SVG before.


If you visit to topic that post comes from, there is a clipping path that can go on other elements, but it is not yet well supported.

The svg will have wider support.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.