HI, I’ve been trying to achieve a mask / reveal effect in the designer.
What I am trying to do is have an element on the page, say 200px x 200px, with a fixed background image, and preview content (heading, button trigger).
When clicked, the element expands to full screen, showing it’s full content.
I’ve achieved this with masking divs growing/shrinking from all edges of the viewport, but this method only allows for one element on the page at a time.
I am thinking that I will need to custom code this with clip-path, but animating clip-path and custom coding was not something I wanted to delve into on this project.
In the link before are two attempts.
The first page
The second page is a prototype of the effect I want to achieve, but it’s not suitable as mentioned above.
The first attempt suffers from the fixed background moving and other issues, but it is a self contained element rather than using external masking divs.
Any ideas or help would be much appreciated!
Here is my site Read-Only: https://preview.webflow.com/preview/element-fullpage-reveal?preview=5c7a0b239e7158516cd5f379c9da5053