Hello folks! I’m a bit of a newbie and I’m looking for help with masking the content of an accordion element I’ve created.
I have three columns that need to be expandable/contractable. I’ve used a white gradient overlay and animations to do this and it works fine, but my issue now is that I have a colourful background that clashes with the white gradients.
Is there a way that I could mask out the content the same way that the white gradients do, but using transparency instead of a solid colour? (ie. think like a Photoshop mask of the content).
Read only link below (ignore other breakpoints but the main one, I haven’t gotten there yet).
Hi Simon! I think you can use the opacity effects in Webflow on any of your elements to mask your content. You can refer to the image below. Let me know if you have other questions. Thank you!
Thanks, but I’m not looking for the standard opacity setting. I want to use a gradient as an opacity mask (as in, the gradient hides the content below it) – I’ve attached screenshots of what I have – currently, I’m using a 100%–>0% white gradient overlay, but that isn’t ideal because the box below it is translucent. I would prefer if the gradient hid the content with transparency (like a mask does in Photoshop – another screenshot attached).
