[Resolved] Overlapping Containers Effect

[Marcel]

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!

[Ying]

Hi Marcel,

Can you link us to the example site?

[Marcel]

Hi Yang,

Sure. It’s
https://www.vicodo.com, but it’s not wordpress.

[Fernando]

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!

[Marcel]

Working :). Thank you a lot, Fernando!

[Fernando]

You’re welcome Marcel!

[Author]

Posts