Masking an image in a custom shape

Hi Guys,

I am struggling to find a way to mask my images inside a unique shape, like this:

I have been uploading the images already in that shape as png’s, but just thinking there must be a better way?

Here is my Read-only link: Webflow - Mark Seuring Physiotherapy

Thanks,

The example you show can be a div, with radius (round corners) and a background image that you’d rotate too if needed.

But you can use a black and white image to mask an image or a div.

Examples here: http://clipping-masking.webflow.io/

3 Likes

You should search on google how to get specific this shape.
**Anyway, one way is by custom-code and clip-path (Another way is by mask - @vincent answer).
https://css-tricks.com/almanac/properties/c/clip/

clip-path step1/4:

Add div + class clip-element
image

step2/4

Add image inside the div.

step3/4 add embed code html:

<style>
.clip-element{
  -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
</style>

Step 4/4 - size issue

Declare the size of the div (Or put image inside the div with opacity of zero ==> like this - div size = image size).

set image opacity to zero

set the same image as a background image position cover center-center

Why? Because this trick works better with background-image.

Get more paths - try this tool:
https://bennettfeely.com/clippy/

3 Likes

Awesome!

I gave it a go and it works! Will need to play around a bit to get the exact shape I want, but the principal works perfectly.

Thanks for the detailed feedback!

2 Likes

Thank you! checking it out.

1 Like

Would it be the same technique if you wanted create a custom shape for the slider mask?

This works for videos as well.
Thanks.

I still have a problem though. I am not working with a polygon or any given shape but an svg.
It is already masking. I created the shape with https://www.blobmaker.app/.

Somehow I can’t center it and I can’t change the size. I would like it to be much bigger. I just got the points from blobmaker for the shape and would like to blow it up now to the size I want it.

(it’s in the section “red sea” and I called it clip-element)

Do you have an idea what I am doing wrong?
Thanks!

https://preview.webflow.com/preview/reef-viz-dahab?utm_medium=preview_link&utm_source=designer&utm_content=reef-viz-dahab&preview=ef274993e23761287f4fae014af40736&mode=preview

@RonnieBester I think I came up with a solution for custom SVG shapes. Please have a look:
https://discourse.webflow.com/t/responsive-svg-clipping-mask-on-image/155254

Was looking for a solution to using an image as a custom mask, was not able to find it here but figured if anyone else is looking to mask an image using a custom shape png image, I should share the solution I found.

you can use the code below on an image you want to be masked by another image. I used the code below to mask the current image using a white shape I made in Figma and uploaded as png that I converted to webp.

!IMPORTANT - Dont remove the () But ADD <> TO STYLE CODE
style
.new-hero__image {
-webkit-mask-image: url(image-for-mask-url.webp);
mask-image: url(image-for-mask-url.webp);
}
/style

The Outcome of the code:

How to get image URL IN the Assets Tab:

Solution came from CSS Masking - The mask-image Property