Messenger Icon

How to create fancy 3D Flip Card Effects on hover

Table of Contents

Any user can improve their user experience by selecting the fancy 3D flip card effect on hover. The online retailers can display the button titles after moving the mouse over these cards and flipping them. One of the most effective ways to raise customer satisfaction is through these 3D Flip Cards.

Demonstration

Captain America

A superhero published by Marvel Comics

Captain America

A superhero published by Marvel Comics

Readmore

Black Widow

American superhero film based on Marvel Comics

Black Widow

American superhero film based on Marvel Comics

Readmore

Tutorials

Trigger element

This element was made by a Piotnet User, in order for it to work, you need to trigger it in “Add Element Creator” category.

Hover over the “3D Flip Card” demonstration.

3D Flip Card illustration 1

After that, it redirects to a Bricks editor, you just need to click on “Save Button”

3D Flip Card illustration 5

This Element will be automatically enabled and stored in “All Elements Creator”.

3D Flip Card illustration 2

Configure Settings

In your Bricks Editor Page/Post, search “3D Flip Card” and pick it.

3D Flip Card illustration 3

Click on Content Tab > Settings, you can customize the content of the Card:

  • Title: The label of Card
  • Description: The content description of card
  • Button Text: label of button
  • Button Link: Embed your Link
  • Background Image: upload your image
3D Flip Card illustration 4