Streaming live at 10am (PST)

Create interactive Stacked Elements

So I have two images stacked on top of each other using this layout:

Section (Titled Splash) →
Container →
Grid →
Div →
Image 1 - Z-Index 2 (Logo)
Image 2 - Z-Index 1 (Enter)

What I am trying to do is a hover interaction to change the state of the two images. So essentially.

Page Load =
Image 1 - Visible
Image 2 - Opacity 0

Hover In =
Image 1 - Opacity 0 (0.5s) - Hide
Image 2 - Opacity 100 (0.5s)

Hover Out =
Image 1 - Show - Opacity 100 (0.5s)
Image 2 - Opacity 0 (0.5s)

From what I have read, the hover function doesn’t work with HTML or CSS for elements stacked below other elements. There seem to be workarounds on the forum, but they are all old and the links are broken, or inaccessible, so it doesn’t help me much.

I have tried to make a workaround by hiding the top element when hovered in, and then showing it when hovering out. My thought is that when hidden the hover should allow the lower element (Image 2) to then be triggered by the hover and its interaction begin.

This works, and the second image appears when hovered over when I change the top element (Image 1) to permanently hidden (not using interactions, but by hitting: Hidden under Layout → Display). But for some reason hiding with an interaction does not allow the lower element to appear.

Is there anyone who could help me achieve this end goal? I don’t know anything about Javascript so if that is what I have to end up using, is there anyone who could help me with that?

Here is my public share link: Webflow - Chris Allard Films

It’s been a while now, does no one have any advice on the matter?

im writing quick but i think you can do this by

putting both images on top of each other
put them in a div and set both to absolute
– they now overlap

then add hover in animation one one to make opacity go from 0-100, and make other hide other
and the opposite animation on hover out to make opacity go form 100-0, and show other