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?

To make the top layer of a multi-layered hero section visible but non-interactive in Webflow, you can use a combination of pointer control and styling.

1. Use pointer-events: none on the Top Layer

• Select the top layer element (e.g., an overlay div or decorative element).
• Go to the Style panel.
• Scroll to the "Layout" section inside Styles.
• Set Pointer Events to None (this disables hover, click, and interactive behaviors).
• The element will remain visually present but won't respond to user interactions.

2. Disable Any Interactions or Hover States

• Remove any Webflow interactions (From the Interactions panel) or hover states from that element.
• Double-check that there are no hover triggers or custom animations still attached to the element.

3. Positioning and Z-Index Considerations

• If the top layer must stay visually on top, ensure:
• It has a higher z-index than underlying layers (e.g., Z-Index: 10).
• It is positioned absolute or fixed relative to a parent with position: relative to avoid disrupting layout.
• This ensures it remains stacked properly without blocking interaction below.

Summary

Set pointer-events to none on your top layer to make it visible but non-interactive. Ensure there are no hover or interaction settings applied, and verify that its visual stacking is intact using z-index and positioning.