TIPS & TRICKS, TUTORIAL

How to create
a Flip Card for Divi

Follow us on

Fabio Sarcona, Web Developer, Italy

27 May 2016

Share41
Tweet
Share
41 Shares

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)
DOWNLOAD TEMPLATES

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 tab > Add 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.

LIVE DEMO 
/****** 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:

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: 

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! ?

Share41
Tweet
Share
41 Shares

5 Comments

  1. GreatJ
    GreatJ on 18/01/2019 at 7:35 am

    Is there any chance you could add just a simple flip box with the image on front and back?

    Reply
  2. Klajdi
    Klajdi on 29/01/2019 at 10:41 am

    Hi there, this is a great tutorial and beautiful for the web. I tried to change the text in the image background layout, but it does not show or change when i publish the website. The background image gets loaded, but the text remains the ‘Quisque velit nisi, pretium ut lacinia in, elementum id enim. Cras ultricie’ one. Any help please?

    Thank you
    Klajdi

    Reply
  3. Adama
    Adama on 20/03/2019 at 12:24 pm

    Bonjour Monsieur,

    Merci pour votre tuto j’essaie d’importer le fichier mais ça refuse.

    Reply
  4. Alesander Mishtenkov
    Alesander Mishtenkov on 31/05/2019 at 12:47 pm

    doesn’t work with the latest version

    Reply
  5. Andres
    Andres on 06/08/2019 at 1:26 pm

    Great tutorial! Can this be done on clicking the box instead of hovering it? Thanks!!

    Reply

Submit a Comment

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