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
- Set the top layer’s Pointer Events to None in the Style panel to make it non-interactive but still visible.
- This allows interactions to pass through to underlying layers without affecting the visual design.
To disable interaction (click or hover states) on the top layer of your multi-layered hero in Webflow, while keeping it visually visible, follow these steps:
1. Use Pointer Events: None on the Top Layer
- Select the top layer element in the Webflow Designer (e.g., an overlay div or image).
- Go to the Style panel > Layout section.
- Set Pointer Events to None.
- This disables all mouse interactions (clicks, hovers) on that layer while keeping it fully visible.
2. Ensure Underlying Layers Are Still Accessible
- By preventing pointer events on the top layer, you allow interactions (like hover effects or button clicks) to pass through to elements beneath it.
- You don’t need to change z-index unless your visibility or interaction is still blocked.
3. Confirm Transparency If Needed
- If your top layer includes semi-transparent elements (like a gradient or translucent image), ensure that the opacity or RGBA values allow visibility of underlying elements.
- This doesn’t affect interactivity, but maintains the desired visual stacking.
Summary
Set Pointer Events to None on the top layer to keep it visible but non-interactive. This allows hover and click interactions to reach any layers beneath without changing the design appearance.
