Archived topic
How to apply 2-directional fading effects to an container/bg-image?
3 replies · Started by Sascha on July 18, 2022
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
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;
}Perfect, thank you 🙏
No problem :)
