Overlay a magnification within a specific shape?

Design & UX
1

Hi,
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

thanks

2

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
3

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.

Thanks

4

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.

5

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