Jump to content

Looking for a good way to mask an image


bernhard
 Share

Recommended Posts

I try to find an easy and solid way to apply a rounded mask to an uploaded image like in this example:

rxP0LgP.png

It seems that clip path does not support such rounded paths? https://bennettfeely.com/clippy/

Then I tried to place a white SVG above the image to fake the effect, but that was 1) ugly and 2) did not work with portrait images. Don't know if I did anything wrong but I was simply not able to make the overlay stretch to the parent container to have the same size as the underlaying image.

How would you tackle this?

Link to comment
Share on other sites

On 11/3/2022 at 1:45 PM, bernhard said:

I try to find an easy and solid way to apply a rounded mask to an uploaded image like in this example:

It seems that clip path does not support such rounded paths? https://bennettfeely.com/clippy/

Then I tried to place a white SVG above the image to fake the effect, but that was 1) ugly and 2) did not work with portrait images. Don't know if I did anything wrong but I was simply not able to make the overlay stretch to the parent container to have the same size as the underlaying image.

How would you tackle this?

Clip path is my preferred solution to obtain this effect but can be tricky if the clip path is a bit more complicated.

As mentioned here the best way to achieve this is to make use of the mask-size property.

-webkit-mask-image: url(path/to/svg);
-webkit-mask-size: cover;

If you chose "cover" for the mask size the SVG will fit to the image dimensions. I made a quick test and it seems to work really good. I didn't know this technique exists so thanks for the hint @3fingers!

  • Like 1
Link to comment
Share on other sites

Just now, Stefanowitsch said:

If you chose "cover" for the mask size the SVG will fit to the image dimensions. I made a quick test and it seems to work really good. I didn't know this technique exists so thanks for the hint @3fingers!

Any chance you could share a fiddle or codepen? 🤗

Link to comment
Share on other sites

Thx for that! I feared that it works like this. That shows the problem that I'm facing!

This is how "contain" works:

UO2oz1c.png

And this is "cover":

K25lzne.png

But what I'd really want is that the SVG streches all the way over the background image to make a perfect "border" around all edges. No matter what size the background image has (portrait or landscape).

So I'm looking for something like a "stretch" setting. You know what I mean?

Link to comment
Share on other sites

On 11/6/2022 at 1:22 PM, bernhard said:

Update: I think it's possible by using 100% 100%, see https://codepen.io/seyedi/pen/KKzeRxE

No, it's not 😞 

lvS3IKB.png

The mask does not stretch to the image below 😞 

GOT IT!!!

sk3AwXo.png

The key is to add this to your <svg> element:

preserveAspectRatio="none"

 

It's for sure an edge-case but I like solutions that work always, and not almost always 🙂 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...