Archived topic
Overlapping Containers Effect
5 replies · Started by Marcel on June 13, 2022
Hello,
I would like to ask if would be possible to create an overlapping effect like in this recording, using GB containers.
I've started a page with three vertical containers (link in the private area), but I'm stuck here.
May I have your help, please?
Thank you!
Hi Marcel,
Can you link us to the example site?
Hi Yang,
Sure. It's
https://www.vicodo.com, but it's not wordpress.
Hi Marcel,
Yes, it’s possible and you would need custom CSS.
First, add my-grid to the CSS classes of the Grid Block as such: https://share.getcloudapp.com/2Num5lmQ
Then, add this custom CSS in Appearance > Customize > Additional CSS:
.gb-grid-wrapper.my-grid > .gb-grid-column:first-of-type > .gb-container > .gb-inside-container {
position:relative;
}
.gb-grid-wrapper.my-grid > .gb-grid-column:first-of-type > .gb-container > .gb-inside-container > .gb-container {
position:sticky;
top: 10px;
left: 0;
}
.gb-grid-wrapper.my-grid > .gb-grid-column:last-of-type > .gb-container {
position:relative;
}
.gb-grid-wrapper.my-grid > .gb-grid-column:last-of-type > .gb-container > .gb-inside-container {
position:sticky;
top: 10px;
left: 0;
}Result: https://share.getcloudapp.com/qGuOKJxm
In essence, to achieve the desired effect, we made the needed Containers Sticky.
Hope this helps!
Working :). Thank you a lot, Fernando!
You’re welcome Marcel!
