Simple (Hopefully) Z-Index Layer Structuring Question

[rayeprescott]

Greetings!

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)

[Smith-Cordell (Max Smith-Cordell)]

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.

[rayeprescott]

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

[Smith-Cordell (Max Smith-Cordell)]

@rayeprescott
You can add an HTML embed with the following code

<style>
	.div_mb-logo {pointer-events: none;}
</style>

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.

[rayeprescott]

@Smith-Cordell

<style>
	.div_mb-logo {pointer-events: none;}
</style>

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!

[Smith-Cordell (Max Smith-Cordell)]

Glad I could help