Hover effects overlap sticky header despite high z-index

Design help Animations & Interactions
1

I have a sticky header with a high z-index so it is always visible. When I scroll down, all other items are hidden underneath it except for hover effects.

For example, if I scroll down so that a video link image is half concealed by the header, and then I hover over that video link image, the entire hover image appears on top of the header.

Does anyone know why the hover effects don’t seem to respect the high z-index of the sticky header?

Here is my public share link: [LINK]
(how to access public share link)

2

I was digging deep and then realized you could just put Overflow: Hidden on that Section Videos. Of course, once you use this attribute, you should be careful about scrolling behaviors or hidden content, etc.

3

Thank-you so much LUKE DORNY! Nailed it.

1 Like