Mask on photo with transparency

Hello, I have a problem with an html integration and I have no idea how to do it. The problem is that I'm on WordPress and the idea is that the client uploads normal photos and they are displayed in this format on the front (with the mask). Do you have any ideas? Because I was thinking of an svg on top of the photo, but I also need to manage the transparency so that the "path" is visible underneath. Thanks in advance Yannick
No description
6 Replies
Jochem
Jochem3mo ago
this is likely what you're looking for https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
MDN Web Docs
clip-path - CSS: Cascading Style Sheets | MDN
The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.
Jochem
Jochem3mo ago
You can use the path function with an SVG path to get whatever shape you want
glloq8
glloq83mo ago
Thanks, I'll look into it
MarkBoots
MarkBoots3mo ago
CSS Generator for Starburst Shapes
Create a starburst shape using CSS clip-path. Get an optimized & modern code in no time.
glloq8
glloq83mo ago
It works perfectly, thanks !!
No description
Jochem
Jochem3mo ago
glad to help!
Want results from more Discord servers?
Add your server