Z-index break interaction on div below

aaleks · February 7, 2019, 9:34pm

Hey there!
I have an object with a hover interaction on it.
On top of this object, is a div with a gradient (fixed position), to add some fading out effect.

Because the gradient has a higher z-index (which it needs), the interaction isn’t working properly.
Is there a way to prevent this from happening?

Thanks in advance.

teejaaygee · February 7, 2019, 10:51pm

Hey aaleks.

Can you supply a share link?

Thanks.

aaleks · February 7, 2019, 11:10pm

Apologies!
Here’s the link. I’m talking about the top link in the list, ‘Amsterdam’.

Thanks!

teejaaygee · February 7, 2019, 11:35pm

Thanks aaleks. I see what you’re trying to achieve here, and am not sure how to get around it. @mistercreate, any ideas?

aaleks · February 8, 2019, 2:09am

Hey man, thanks for taking a look.
I actually just figured it out, didn’t really know what to search for before, but then I remembered:

.scroll-gradient-top {pointer-events:none;}

This code will ignore the gradient element.