Home / Divi Tips and Tricks / How to create flip cards in Divi – Easy three steps
Divi Tips and Tricks

How to create flip cards in Divi – Easy three steps

Hello guys, Today I am going to teach you how to create flip cards in Divi. Without any plugins. Let’s start.

Step One – How to create flip cards in Divi

Add a section and a 3 columns row. Then, add below classes to the row and columns.
Row – flip-card
For each column  – flip-card-inner

* Row and Column Settings

Step Two

Now we have to add our content. Front side and the back side. I am adding a Blurb for the front side and a Text module for the backside. Remember to add the same height for both. Also add below classes.

Front (Blurb module) : flip-card-front
Back (Text module) : flip-card-back

Blurb Module Settings

Text Module Settings

Step Three – How to create flip cards in Divi

Great! Now we have our design ready. Lets do the magic. Copy the below CSS code and add that to Divi. I hope you already know how to add custom CSS codes to Divi.

/*Flip Card Styling*/

.flip-card {
	-webkit-perspective: 1000px;
	        perspective: 1000px;
}

.flip-card:hover .flip-card-inner {
  	-webkit-transform: rotateY(180deg);
  	        transform: rotateY(180deg);
}

.flip-card-inner{
	position: relative;
  	width: 300px;
  	height: 300px;
  	text-align: center;
  	-webkit-transition: -webkit-transform 0.8s;
  	transition: -webkit-transform 0.8s;
  	-o-transition: transform 0.8s;
  	transition: transform 0.8s;
  	transition: transform 0.8s, -webkit-transform 0.8s;
  	-webkit-transform-style: preserve-3d;
  	        transform-style: preserve-3d;
}

.flip-card-front, .flip-card-back {
	position: absolute !important;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden !important;
	        backface-visibility: hidden !important;
}

.flip-card-back {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

Important

To work this perfectly on Safari please do the following. 

Go the the Blurb module setting > Adavaced > Custom CSS and add the below code to the Main Element, Blurb Image, Blurb Title and Blurb Content. 

-webkit-backface-visibility: hidden !important;
backface-visibility: hidden !important;

*Blurb Module Custom CSS

Thats how to create flip cards in Divi.
If you need any help feel free to comment below. Good luck. 🙂

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *