How can I click below transparent divs in Webflow?

You're likely trying to click elements underneath a transparent or non-interactive div, but it's blocking pointer events. In Webflow, this can be solved by adjusting the div’s behavior using CSS properties.

1. Use pointer-events: none on the Transparent Div

• Select the transparent div in Webflow's Designer.

• In the Style panel, scroll to the Custom CSS properties section under the selector.

• Add custom CSS using an Embed component or directly in Project Settings → Custom Code:

  .your-div-class {  pointer-events: none;}

• Alternatively, set this using Webflow’s built-in style system:

• Give the div a custom class (e.g., transparent-overlay).

• Add a small custom embed code block (add inside the page or in the ):

  • <style>.transparent-overlay { pointer-events: none; }</style>

2. Consider Z-Index Layers

• Ensure your transparent div sits above the clickable elements only visually and not in interaction.
• Try lowering the z-index of the transparent div (or increasing the z-index of the clickable elements beneath).
• If the transparent div isn't intended to intercept any interactions, position it absolutely/fixed and send it "behind" interactable layers via z-index and pointer-events: none.

3. Use Conditional Visibility If Interaction Not Needed Constantly

• If the transparent div is only needed occasionally (e.g., for animation, effect, or decoration), hide it using Webflow interactions when it’s not needed.
• Use Webflow interactions to toggle the div's display or opacity and pointer-events.

4. Test Responsiveness and Other States

• Ensure in Tablet and Mobile views, the transparent div still has pointer-events: none if it's reused.
• Webflow styles are device-specific — double-check each breakpoint.

Summary

To click through transparent divs in Webflow, apply pointer-events: none to that div. This tells the browser to ignore it during mouse/touch events, allowing you to interact with elements underneath.