Looking for a good way to mask an image

[bernhard]

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?

[3fingers]

I think I would go with - raster - image masks, like mentioned here:

https://css-tricks.com/almanac/properties/m/mask-size/

Nowadays the support is very good and it covers the problems you are facing.

[LostKobrakai]

You could probably also wrap the image in an svg, which applies the mask.

[Stefanowitsch]

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!

[bernhard]

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? ?

[Stefanowitsch]

30 minutes ago, bernhard said:

Any chance you could share a fiddle or codepen? ?

There you go ?

https://jsfiddle.net/4Lgw5vuh/

[bernhard]

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

This is how "contain" works:

And this is "cover":

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?

[bernhard]

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

[bernhard]

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 ? 

The mask does not stretch to the image below ? 

GOT IT!!!

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 ? 

[millipedia]

If you're just after making your image a wonky shape then you can probably just use some fancy css border radius values.

Here's a handy looking site for generating the code that looks promising:

https://9elements.github.io/fancy-border-radius/

[bernhard]

5 hours ago, millipedia said:

https://9elements.github.io/fancy-border-radius/

Nice, thx! There's also a version with more control: https://9elements.github.io/fancy-border-radius/full-control.html