Simple (Hopefully) Z-Index Layer Structuring Question


So, I am currently working on designing a site in which I have a number of planet graphics that use interactions to create a parallax effect as you scroll. When you get to the end of scroll the planets should have both a grow on hover and grow big on click interaction. The issue I am running into now is as the planets scroll they need to be behind my main site LOGO graphic. When I use Z index to put the planets behind the logo it “breaks” those final hover and click animations. The images aren’t able to be interacted with at all.

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

Hi @rayeprescott, I had a quick look at this for you. Looks like you can just raise the z-index of Div_MB-Logo and it will lift your logo above the planets without having to change the planets z-index.

Ah Yea, it will - however when I do that it breaks the links and interactions of the planets.

You can add an HTML embed with the following code

	.div_mb-logo {pointer-events: none;}

This will make it so that the contents of that div are not clickable meaning that you should be able to click through to the planets below.

Thank you very much!!! I was messing around with pointer events myself earlier before I made my post and couldn’t get it to work I don’t know if it was my spacing or naming of the div but your code worked!

:grinning: Glad I could help :webflow_heart:

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.