How can I prevent the top layer of my multi-layered hero in Webflow from being clickable or having a hover state while still being visible?
TL;DR
- Select the top-layer element in Webflow that should remain visible but non-interactive.
- Apply style pointer-events: none via the Style panel or Custom CSS to disable clicks and hovers.
- Ensure the element has a high z-index and 100% opacity for proper visibility.
To prevent clicks or hover events on the top layer of a multi-layered hero section in Webflow, while still keeping it visible, you can use pointer-events: none.
1. Select the Top Layer Element
- In the Webflow Designer, select the top-level element that should be visible but not interactive.
- This is typically an image, overlay div, or gradient placed above the hero content.
2. Apply "pointer-events: none"
With the element selected, go to the Style panel.
Scroll to the "Layout" section.
Click the “+” icon next to ‘Custom CSS’ properties (if needed).
Add this style:
pointer-events: noneAlternatively, in the Style panel, go to the “Custom” section at the bottom and type:
Property:
pointer-eventsValue:
none
3. Verify Z-Index and Visibility
- Ensure the top layer still has a higher z-index than layers below, e.g., a z-index of 10 or higher.
- Confirm opacity is 100%, and no display/hide settings are interfering.
Summary
Set pointer-events: none on your top hero layer to make it non-clickable and ignore all hover interactions, while still keeping it visually present above underlying content.