I have a section on my homepage with two showcases inside. The first showcase that appears has mouse hover animations over image icons, and the second showcase that reveals on scroll (and scrolls horizontally with the page) that includes part of my portfolio.
I am stuck because I want the second showcase that includes my portfolio to scroll horizontally OVER TOP of the first showcase involving the hover animated icons.
Right now, everything is working except the first showcase is not going behind the second one. I will include my read link , please help if it’s possible🙌🏼
Here is my site Read-Only: LINK
Hi there,
To create overlapping elements with hover effects and horizontal scrolling in Webflow, you can use a combination of positioning and z-index settings. Start by setting the parent container to “Position: Relative” and the overlapping elements to “Position: Absolute.” Adjust their z-index values to control which elements appear on top.
For hover animations, you can use Webflow’s Interactions panel to create hover states for each element. This works well with absolutely positioned elements, allowing you to animate properties like opacity, scale, or position on hover.
To implement horizontal scrolling, set your container to “Overflow-X: Scroll” and ensure the inner elements have sufficient width to enable scrolling. You can maintain the hover effects while elements scroll by keeping the hover interactions independent of the scrolling container.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
Hi! Thank you for the answer. I appreciate it. The only thing is that the format/design of my entire homepage is a bit tricky. Did you look at it? My nav bar comes in on scroll and when I try to set things to absolute they cover the top section of the entire page. Not what I want. Thanks
Okay so I fixed the problem for the z index where they were overlapping incorrectly.
Now I just need to know how to allow the hover animations to work when the image icons are in view, before they scroll behind the second showcase.
Let me know if anyone has a clue.
Thanks
