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: https://preview.webflow.com/preview/chrisallardfilms?utm_medium=preview_link&utm_source=designer&utm_content=chrisallardfilms&preview=017d7d1576c6aee2a7659314bd99da55&mode=preview