[Resolved] How to apply 2-directional fading effects to an container/bg-image?

[Sascha]

Hi,

please, allow me to handle this request here, since I use both GPP & GBP and would like to keep all my support tickets here.

I have used one of GB-site-templates on this page, where a hero-image is placed as a bg-image inside a container.

The fading-effect is currently applied from left to the centre, so that only the right-part of the image is visible.

Is there a way to apply a second fading effect from the bottom to the centre? If so, how to achieve this effect?

I want the hero-container to “fade” into the dark-blue container below 🙂

Thank you in advance and kind regards,
Sascha

[Ying]

Hi Sascha,

Try add an addtional CSS class for the GB container, eg. hero-container, then add this CSS:

.gb-container.hero-container:before {
    content: "";
    background-image: linear-gradient(0deg, var(--contrast) 5%, transparent 30%);
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

[Sascha]

Perfect, thank you 🙏

[Ying]

No problem 🙂

[Author]

Posts