The "filter" css class, when applied to the Parallax component, is disabling all the buttons and links

[hustlelikeaboss]

The "filter" css class, when applied to the Parallax component, is disabling all the buttons and links inside the component.

<Parallax filter image={require("assets/img/landing-bg.jpg")}>

Example: https://creativetimofficial.github.io/material-kit-react/#/landing-page

Not sure what exactly content: "''" is supposed to do, but removing it has fixed the issue for me:

filter: { "&:before": { background: "rgba(0, 0, 0, 0.05)" }, "&:after,&:before": { position: "absolute", zIndex: "1", width: "100%", height: "100%", display: "block", left: "0", top: "0", // content: "''" } },

[einazare]

Hello @hustlelikeaboss ,

And thank you for your interest in using our product. It actually does not. If you can see, there is a zIndex property there, which will make the filter to be on top on each child. If you want your children of the Parallax to appear above, than you'll need to add a zIndex property for your children as well, preferably set to 2 or higher to make them on top of the Parallax filter.

Does this makes sense?

Best, Manu

[hustlelikeaboss]

Try clicking the button in the paralax on this page: https://creativetimofficial.github.io/material-kit-react/#/landing-page.

I set it to 10 and no difference.

[einazare]

Hello again @hustlelikeaboss ,

I see that it works just fine on the live preview. Here are two images with and without zIndex on children:

As you can see, without z-index on children, they appear to be behind the parallax, but with z-index, they are above.

Is this helpful?

Best, Manu

[hustlelikeaboss]

I feel like we're talking past each other, but thanks for taking the time to respond.

[mustafa-kahraman]

any solution?