Site logo

Archived topic

How to create Flip Cards or Hover Cards with GB?

1 reply · Started by Sascha on September 25, 2022

Viewing posts 1–2 of 2

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

Hi Sascha,

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

This archived topic is closed to new replies.