Mix Blend Mode on child of container with pseudo element

When I use the Opacity & Blend tool to make a child element (e.g. a headline block) blend with the parent container background it doesn’t work, however as soon as I switch the background to be a normal element it does. I’ve been trying to make this work with pseudo backgrounds since it opens abilities to use additional gradients etc.

I suspect this behaviour is expected since it might be due to CSS functionality. However, when I target the inner container of the parent block and assign a blend it works just fine, so I also suspect there is a way to do this with specific child blocks. I have tried to target the child block from the parent block using a custom selector, both .my-custom-block and .gb-inside-container .my-custom-block, without success.

Does anyone have any ideas? :slight_smile:
Thank you!

Strange - any chance you can link me to an example of it not working with a pseudo background?

My first thought is that it’s having trouble picking up the background vs. having it actually attached to the element itself, but that’s just a guess.

Sure! However the website I’m building at the moment is currently on a temporary pre-launch adress which has issues with the SSL certificate. My host haven’t been able to solve that, so I hope you don’t mind to ignore the warning and continue to the site. :sweat_smile:

I have made a demonstration of the issue here: https://samvetet.org.loopiadns.com/test/.
Since the media files is on a subdomain you have to allow your browser to access it as well, you can do so by opening this image: https://media.samvetet.org.loopiadns.com/2021/01/slosam-1.webp.

Since the blend works when it’s assigned to the parent’s inner container, my uneducated guess is that it has problems picking up the background and that the parent’s inner container (being “in between”) is somehow blocking it. However, if that’s the case it still doesn’t explain why this problem only occurs with pseudo backgrounds.

Thanks! :slight_smile:

Hi there,

this issue is actually two fold.
The issue is because of the CSS Stacking Context of that layout.
For it to work the:

  1. Parent Container requires a z-index: 1 ( default)
  2. The inner-container has to have NO z-index.
  3. The Headline ( or any content ) requires a z-index: 1 (default)

But currently you cannot remove the z-index value using the GB Settings.

Try adding this CSS:

.flatten-stack .gb-inside-container {
z-index: initial;

And then select the Container Block and give it an additional CSS Class of: flatten-stack

1 Like

Thanks @diggeddy, that fixed it! :slight_smile:

Is there any chance a future version includes a fix to this, e.g. by providing an option to remove the inner z-index?

Glad to hear that. Yep something we’re looking into :slight_smile:

1 Like