Streaming live at 10am (PST)

Masked area expanding to reveal background & content


#1

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