TIPS & TRICKS, TUTORIAL

How to create
a Flip Card for Divi

Follow us on

Fabio Sarcona, Web Developer, Italy

27 May 2016

Do you want to know how to create a Flip Card for Divi? You said yes? Well, because in this article I’ll explain how to create Flip Card with animated CSS3 with a few simple steps. Let’s start now!

The first step is to add a section and one or more columns with a code module.

To make your life easier you can download this file with three sections that I used for this tutorial. Inside you’ll find the HTML code.

NOTE: You will need to Import the JSON file into your Divi Library while adding the JS code and the code for Font-Awesome to your options panel as described below.

So the necessary steps are:

  1. Import the json file into your Divi Library;
  2. Add the JS code in your option panel in the Integrations tab;
  3. In the same tab, under the JS code, paste the code to load Font-Awesome (optional)

Before moving forward with this tutorial, I will show you how it’s done the HTML code found inside module because I want you to learn how to customize it even if you have little or no knowledge of code. This is a screenshot of the HTML code. All you need to do to customize this code and change the icon in the tag and change the title text, paragraphs and add the link to the button.

Now that you’ve seen how to edit the HTML code I show you three examples of flip cards and their CSS code that you will need to add to the Divi or to your child theme options panel.

Now add jquery

First add this script (you can find the JS code in the zip package along with the layouts used for this tutorials) in your options panel, clicking on the Integrations tabAdd code to the < head > of your blog. Here is a screenshot:

1. Flip Card Horizontal

In this first example I applied a horizontal flip effect. This is the most common effect but it is 100% Responsive and allows you to get any result or style with little effort.

/****** FLIP CARD HORIZONTAL *******/
 .flip_panel {
     margin: 0 auto;
     height: 300px;
     position: relative;
     display: block;
     transform-style: preserve-3d;
}
 .flip_panel .front, .flip_panel .back {
     text-align: center;
}
 .flip_panel .front {
     height: inherit;
     position: absolute;
     top: 0;
     z-index: 99;
     text-align: center;
     -webkit-transform: rotateX(0deg) rotateY(0deg);
     -moz-transform: rotateX(0deg) rotateY(0deg);
     -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -webkit-transition: all .55s ease-in-out;
     -moz-transition: all .55s ease-in-out;
     -ms-transition: all .55s ease-in-out;
     -o-transition: all .55s ease-in-out;
     transition: all .55s ease-in-out;
}
 .flip_panel .back {
     height: inherit;
     position: absolute;
     top: 0;
     z-index: 1000;
     -webkit-transform: rotateY(-180deg);
     -moz-transform: rotateY(-180deg);
     -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -webkit-transition: all .55s ease-in-out;
     -moz-transition: all .55s ease-in-out;
     -ms-transition: all .55s ease-in-out;
     -o-transition: all .55s ease-in-out;
     transition: all .55s ease-in-out;
}
 .flip_panel.flip .front {
     z-index: 99;
     -webkit-transform: rotateY(180deg);
     -moz-transform: rotateY(180deg);
}
 .flip_panel.flip .back {
     z-index: 100;
     -webkit-transform: rotateX(0deg) rotateY(0deg);
     -moz-transform: rotateX(0deg) rotateY(0deg);
}
/*** Flip Card Front box ****/
 .flip_box_front {
     width: 100%;
     min-height: 300px;
     margin: 0 auto;
     padding: 25px 15px;
     border: 2px solid #ddd;
}
/*** Flip Card Back box ****/
 .flip_box_back {
     background-color: #fafafa;
     width: 100%;
     min-height: 300px;
     margin: 0 auto;
     padding: 35px 15px 20px 15px;
     border: 2px solid #ddd;
}
/*** Button Learn More ****/
 .flip_button {
     display: inline-block;
     margin: 8% auto 0;
     padding: .5em 1.2em;
     cursor: pointer;
     font-size: 16px;
     background: #598edb;
}
/*** Button Learn More color Text ****/
 .flip_button a {
     color: #fff ;
}
/*** Title Flip Card ****/
 .flip_title {
     margin: 0 auto;
     text-align: center;
     line-height: 1em;
     font-size: 1.15em ;
     display: block;
     font-weight: bold;
}
 .flip_icon {
     display: inline-block;
     font-size: 3em;
     margin: 0 auto 7% auto;
     border: 3px solid #ddd;
     text-align: center;
     padding: 26px;
     border-radius: 50%;
}
 .text_flip_card {
     padding: 0 7%;
}

2. Flip Card Vertical

This effect is the same as above, with the only difference that the animation is in the vertical direction. Live Demo:

/****** FLIP CARD VERTICAL *******/
 .flip_panel {
     margin: 0 auto;
     height: 300px;
     position: relative;
     display: block;
     transform-style: preserve-3d;
}
 .flip_panel .front, .flip_panel .back {
     text-align: center;
}
 .flip_panel .front {
     height: inherit;
     position: absolute;
     top: 0;
     z-index: 99;
     text-align: center;
     -webkit-transform: rotateX(0deg) rotateY(0deg);
     -moz-transform: rotateX(0deg) rotateY(0deg);
     -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -webkit-transition: all .55s ease-in-out;
     -moz-transition: all .55s ease-in-out;
     -ms-transition: all .55s ease-in-out;
     -o-transition: all .55s ease-in-out;
     transition: all .55s ease-in-out;
}
 .flip_panel .back {
     height: inherit;
     position: absolute;
     top: 0;
     z-index: 1000;
     -webkit-transform: rotateX(-180deg);
     -moz-transform: rotateX(-180deg);
     -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -webkit-transition: all .55s ease-in-out;
     -moz-transition: all .55s ease-in-out;
     -ms-transition: all .55s ease-in-out;
     -o-transition: all .55s ease-in-out;
     transition: all .55s ease-in-out;
}
 .flip_panel.flip .front {
     z-index: 99;
     -webkit-transform: rotateX(180deg);
     -moz-transform: rotateX(180deg);
}
 .flip_panel.flip .back {
     z-index: 100;
     -webkit-transform: rotateX(0deg);
     -moz-transform: rotateX(0deg);
}
/*** Flip Card Front box ****/
 .flip_box_front {
     width: 100%;
     min-height: 300px;
     margin: 0 auto;
     padding: 25px 15px;
     border: 2px solid #ddd;
}
/*** Flip Card Back box ****/
 .flip_box_back {
     background-color: #fafafa;
     width: 100%;
     min-height: 300px;
     margin: 0 auto;
     padding: 35px 15px 20px 15px;
     border: 2px solid #ddd;
}
/*** Button Learn More ****/
 .flip_button {
     display: inline-block;
     margin: 8% auto 0;
     padding: .5em 1.2em;
     cursor: pointer;
     font-size: 16px;
     background: #598edb;
}
/*** Button Learn More color Text ****/
 .flip_button a {
     color: #fff ;
}
/*** Title Flip Card ****/
 .flip_title {
     margin: 0 auto;
     text-align: center;
     line-height: 1em;
     font-size: 1.15em ;
     display: block;
     font-weight: bold;
}
 .flip_icon {
     display: inline-block;
     font-size: 3em;
     margin: 0 auto 7% auto;
     border: 3px solid #ddd;
     text-align: center;
     padding: 26px;
     border-radius: 50%;
}
 .text_flip_card {
     padding: 0 7%;
}

3. Flip Card with Background Image

In this case I added a background image in the front panel with a linear-gradient to create an overlay effect and highlight the text.  See the live demo: 

/****** FLIP CARD BACKGROUND IMAGE *******/
 .flip_panel {
     margin: 0 auto;
     height: 300px;
     position: relative;
     display: block;
     transform-style: preserve-3d;
}
 .flip_panel .front, .flip_panel .back {
     text-align: center;
}
 .flip_panel .front {
     height: inherit;
     position: absolute;
     top: 0;
     z-index: 99;
     text-align: center;
     -webkit-transform: rotateX(0deg) rotateY(0deg);
     -moz-transform: rotateX(0deg) rotateY(0deg);
     -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -webkit-transition: all .55s ease-in-out;
     -moz-transition: all .55s ease-in-out;
     -ms-transition: all .55s ease-in-out;
     -o-transition: all .55s ease-in-out;
     transition: all .55s ease-in-out;
}
 .flip_panel .back {
     height: inherit;
     position: absolute;
     top: 0;
     z-index: 1000;
     -webkit-transform: rotateY(-180deg);
     -moz-transform: rotateY(-180deg);
     -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -webkit-transition: all .55s ease-in-out;
     -moz-transition: all .55s ease-in-out;
     -ms-transition: all .55s ease-in-out;
     -o-transition: all .55s ease-in-out;
     transition: all .55s ease-in-out;
}
 .flip_panel.flip .front {
     z-index: 99;
     -webkit-transform: rotateY(180deg);
     -moz-transform: rotateY(180deg);
}
 .flip_panel.flip .back {
     z-index: 100;
     -webkit-transform: rotateX(0deg) rotateY(0deg);
     -moz-transform: rotateX(0deg) rotateY(0deg);
}
 .flip_box_front {
     -moz-background-size: cover;
     -o-background-size: cover;
     -webkit-background-size: cover;
     background: linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) ), url('https://creativechildthemes.com/divi-lab/wp-content/uploads/sites/6/2016/04/marketing.jpg');
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     width: 100%;
     min-height: 300px;
     margin: 0 auto;
     padding: 25px 15px;
     -webkit-box-shadow: 0px 12px 15px 0px rgba(50, 50, 50, 0.3);
     -moz-box-shadow: 0px 12px 15px 0px rgba(50, 50, 50, 0.3);
     box-shadow: 0px 12px 15px 0px rgba(50, 50, 50, 0.3);
}
 .flip_box_back {
     background-color: #fafafa;
     width: 100%;
     min-height: 300px;
     margin: 0 auto;
     padding: 35px 15px 20px 15px;
     -webkit-box-shadow: 0px 12px 15px 0px rgba(50, 50, 50, 0.3);
     -moz-box-shadow: 0px 12px 15px 0px rgba(50, 50, 50, 0.3);
     box-shadow: 0px 12px 15px 0px rgba(50, 50, 50, 0.3);
}
 .flip_button {
     display: inline-block;
     margin: 5% auto 0;
     padding: .5em 1.2em;
     cursor: pointer;
     font-size: 16px;
     background: #598edb;
}
 .flip_button a {
     color: #fff ;
}
 .flip_box_front .flip_title {
     color: #fff;
     margin: 15% auto 0 auto;
     text-align: center;
     line-height: 1em;
     font-size: 1.55em ;
     display: block;
     font-weight: bold;
}
 .flip_title {
     margin: 0 auto;
     text-align: center;
     line-height: 1em;
     font-size: 1.15em ;
     display: block;
     font-weight: bold;
}
 .flip_box_front .text_flip_card {
     color: #fff;
}
 .text_flip_card {
     padding: 0 7%;
}

Conclusion

This is all. Now you also know how to create beautiful animated cards in Divi, and all you have to do and vent your creativity :).

If you liked this article then I’m sure you’ll appreciate very well the next article .. you want to know what you speak? I’ll show you how to create an animated text, so if you do not want to miss the next article and the free resources subscribe to the newsletter.

Have a nice weekend! 🙂