Create CSS Flip cards in Canvas

“What a snazzy interaction” - all the people

Sean Nufer

How To Canvas

Portland sartorial poke yuccie, echo park chillwave blue bottle pitchfork heirloom try-hard microdosing enamel pin blog.

This neat flip card effect utilizes CSS and HTML to create and interactive element for your Canvas pages. It consists of a CSS container with a front and a back. When the mouse hovers over then the object utilizes a 3D effect to flip to the back.

CSS - the spice of life

You will need to add the CSS code to your Canvas instance. You can create multiple CSS classes if you would like more than one aspect ratio for your cards. I chose an aspect ratio of 1:1 at 300 pixels. If you are using a picture for one of the sides of your card, then you will want to ensure that the picture has the aspect ratio that you specify.

/*
*
* ==========================================
* FLIP CARD WITH TEXT
* ==========================================
*
*/

/* This is a 300px x 300px flip card with the front image defined on the page HTML */

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

/* Do a horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}

HTML - making your dreams come true

Once you have the CSS uploaded to your theme editor, the HTML content is how you will create your flip cards. You can create this interaction anywhere you have access to the Rich Content/HTML Editor - announcements, pages, assignments, discussions (and even discussion posts), etc. You will likely want to do all the editing in the HTML Editor so that you can have control over the elements and so that non of your content goes amiss. Here is the code you can place on your page:

<div class="flip-card" style="margin: 50px;">
    <div class="flip-card-inner">
        <div class="flip-card-front"><img style="width: 300px; height: 300px;" src="https://images.unsplash.com/photo-1597589827317-4c6d6e0a90bd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80" alt="Avatar" /></div>
        <div class="flip-card-back">
            <h1 style="padding-top: 25px;">Sean Nufer</h1>
            <h3>How To Canvas</h3>
            <p style="padding: 10px;">Portland sartorial poke yuccie, echo park chillwave blue bottle pitchfork heirloom try-hard microdosing enamel pin deep v pok pok blog.</p>
        </div>
    </div>
</div>

Of course you can modify the margins, the image, and the back card content. You will want to specify that your image is the same aspect ratio as you coded in the CSS. In my case, both my image and my CSS container are 300px width and 300px height.

The advantage to building this flip card in Canvas as opposed to using an online tool is that you have complete control over the code and the content. You are not relying on embedding the content from another server. If Canvas boots up then so will your interaction.

Give this a try and have some fun!

---

Please consider subscribing to our YouTube channel for more Canvas tips and tricks. It is so easy and so free. The only thing you have to do is click this link: http://bit.ly/how2canvas

And follow us on social media

Twitter: https://twitter.com/HowToCanvas

Instagram: https://www.instagram.com/HowToCanvas

Facebook: https://www.facebook.com/HowToCanvas