[Support request] How to create Flip Cards or Hover Cards with GB?

[Sascha]

Hello,

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’d like to create a “Cards” layout using a Grid with 3 columns, where each Container inside the Grid will flip on hover and reveal a different content.

A tutorial for the default Gutenberg-Blocks can be found here, but I’d like to recreate this using GB.

I would consider a structure like this:

Grid
– Container-Wrapper1
— Container-Content1.1
— Container-Content1.2
– Container-Wrapper2
— Container-Content2.1
— Container-Content2.2
– Container-Wrapper3
— Container-Content3.1
— Container-Content3.2

where the Container-Content inside each Container-Wrapper will swap on hover.

Instead of the “flip” effect, I’d be happy with any other effect, e.g. a “pull” effect, where the 2nd Container-Content will overlap the 1st one like a curtain, from the upper border on hover.

Any chance to guide me here?

Thank you in advance and kind regards,
Sascha

[Fernando]

Hi Sascha,

Can you provide the link where you’ve created this structure?

[Author]

Posts