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