How to create Flipping Cards in WYSWIYG Web Builder 16

Do you want to share WYSIWYG Web Builder tips, tricks, tutorials or useful HTML code? You can post it here...
(no questions or problems please, this section is not monitored by support).
Forum rules
This section is to share tips, tricks and tutorials related to WYSIWYG Web Builder.
Please do not post questions or problems here. They will not be answered.

PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
Post Reply
User avatar
dapson
 
 
Posts: 373
Joined: Tue Jan 26, 2016 4:11 pm
Location: Accra, Ghana
Contact:

How to create Flipping Cards in WYSWIYG Web Builder 16

Post by dapson »

In this tutorial, we will take a look at how to create a flipping card effect using two cards and a rollover tool in WYSIWYG Web Builder 16.

When you add two cards (default and hover) and set the 'Position children' option to 'floating' then both cards will automatically get the same height so you can, for example, implement 'flipping cards' with this process.

Watch the video here: https://youtu.be/b7WNc14mla4
User avatar
cgcreator
 
 
Posts: 38
Joined: Tue Sep 07, 2021 12:03 pm
Location: Germany

Re: How to create Flipping Cards in WYSWIYG Web Builder 16

Post by cgcreator »

THX
It's even easier with pure CSS. But how to make it in WYSIWYG web builder?

Like this:
https://codepen.io/faelplg/pen/MWwxred

? :cry:
User avatar
Pablo
 
Posts: 22472
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: How to create Flipping Cards in WYSWIYG Web Builder 16

Post by Pablo »

User avatar
cgcreator
 
 
Posts: 38
Joined: Tue Sep 07, 2021 12:03 pm
Location: Germany

Re: How to create Flipping Cards in WYSWIYG Web Builder 16

Post by cgcreator »

Pablo wrote: Sun Jan 21, 2024 7:50 am You can do this with a rollover layer.

https://www.wysiwygwebbuilder.com/support/wb16tryouts/wb16_rolloverlayer_cards.html
Thank you. I will check it :)
Post Reply