Hover trigger is blocked by transparent element

Design help Animations & Interactions
1

Hi,
I’m trying to create a split screen design which expands on hover.
I use interactions to do that, but since scaling is not possible on X without Y, I had to find a workaround. I gave the blue box in the back a scale interaction, and positioned the white section on top using index=3. So the blue box expand on both axes, but you see only the expand to the right, because the top is hidden under the white section.
Here’s the thing, when I add another transparent div with text and image on top of the blue box (Create Box), it blocks the hover trigger. As long as Create Box is hidden the expand interaction works fine, but when if it’s visible nothing happens when I hover. How can I solve this?

https://preview.webflow.com/preview/master-site?preview=17828dedc760574bb400c844a57de366

2

As your interaction already targets other elements, would it be possible to trigg the interaction by hovering the div that contains the overlay infos? Because there is not HTML/CSS workaround to make a lower element to catch the hover event if it’s masked by an upper element.

This absolutely is common routine when designing complex interaction with Webflow, thinking of the structure to handle this kind of limitations. There is always a way, but you don’t always find it during the first try (:

3

Thank you @vincent , I think I found a way to do it. A bit complicated, but it works.