HTML 'flip card' widget

There it is!  Thanks @Cindy McElhinney! I have located the email now and got the link to the document (I can’t access file sharing in my firm.  The link for anyone else that may be interested is: Road To Inspire 2020 - Building a tailored learning experience - HTML&CSS TechDoc.pdf (hubspotusercontent00.net)

I tinkered around with the flipcards and they look awesome.  However, I have not put any of them in place on our live pages yet because I ran into an issue with older version of Edge.  The flipcards were not displaying correctly in Edge, but they did work correctly for those that have upgrade to the “new Edge.”  Firefox and Chrome browsers so far seem to work well.  Has anyone else seen issues with some browsers and these flipcards?  I’m hoping down the road that enough people will have gotten the updated version of Edge that we can finally put these to use.  Thanks to Docebo for sharing this cool idea!

@dklinger - I copied their code and made a few changes to create what I wanted.  It looks fine in Firefox, Chrome, and Edge on my pc, but I had a few others test it and those that had the older version of Edge had a hot mess display.

I made a simple card with an image on the front as a background and a question, with the answer on the back (flip-side) with just a solid color as the background.  The navy blue with the word “FAQS” on it is an image file I used as the background on the front of the card.

Front:

Back:

To do this, I added this code to the CSS overrides in the Branding area under Admin:

/*CUSTOM FLIPCARD - START*/
#custom_flipcard {height: 100%; transform-style: preserve-3d; perspective: 600px; transition: 0.5s; 
overflow: hidden;}
#custom_flipcard:hover .card-front {transform: rotateY(-180deg);} #custom_flipcard:hover .card-back 
{transform: rotateY(0deg);}
.card-front {height: 100%; width: 100%; background-position: 50% 50%; background-size: cover; 
position: absolute; top: 0; left: 0; backface-visibility: hidden; transition: 0.5s; }
.card-back {height: 100%; width: 100%; position: absolute; top: 0; left: 0; background-color: 
#ffffff; backface-visibility: hidden; transform: rotateY(180deg); transition: 0.5s; color: #ffffff; 
text-align: center; margin: 0; display: flex; justify-content: center;
align-items: center;}
.card_back_text a {padding: 8px 16px; border-radius: 2px; line-height: 20px; font-size: 14px; 
font-weight: 700; color: #ffffff; background: #64A70B; text-transform: uppercase;
text-decoration: none;}
.card_back_text a:hover { color: #ffffff; background-color: #AB2328;}
.card_front_title {font-size: 25px; line-height: 34px; font-weight: 700; color:#ffffff; text-align: 
center; margin: 75px 25px 25px 25px; z-index: 1;}
.card_back_text {font-size: 16px;line-height: 22px; font-weight: 600; text-align: center; 
margin:25px; color:#ffffff;}
.flipcard_overlay {width:100%;height:100%; display: flex; justify-content: center; align-items: 
center;}
/*CUSTOM FLIPCARD - END*/

Then used this code in an HTML widget on a page:

(I removed the URLs that that would display our full location for the items where I put “REPLACE THIS WITH...” in the snippets below for security reasons.  We store most of our images and documents on our own webserver)

<div id = "custom_flipcard">
<div class = "card-front" style = "background-image:
url(REPLACE THIS WITH WHERE I HAVE MY BACKGROUND IMAGE STORED ON OUR WEBSERVER);">
<!--<div class = "flipcard_overlay" style= "background: rgba(224, 25, 51, 0.3)">-->
<div class = "card_front_title" >How do I view times based on my local timezone?</div>
<!--</div>-->
</div>
<div class = "card-back" style = "background: #0074bc">
<div class = "card_back_text">Select the <strong>Main Menu icon</strong> at the top-left of the screen, then select the<strong> pencil icon</strong> to the right of your name. On your profile screen, select <strong>Preferences</strong> &gt; choose your <strong>Timezone</strong> from the dropdown menu &gt; select <strong>Save Changes</strong>.<br/><br/><a
href= "REPLACE THIS WITH THE FULL URL LOCATION OF WHERE I WANT THE BUTTON TO POINT TO" target="_blank">Click here to view more FAQs</a></div>
</div>
</div>

Has anyone gotten this to work recently?

Did a direct copy and paste of the code above, but all I can seem to get is this as a result on Chrome:

Here is my code:

CSS - 

/*CUSTOM FLIPCARD - START*/
#test_flipcard {height: 100%; transform-style: preserve-3d; perspective: 600px; transition: 0.5s; 
overflow: hidden;}
#test_flipcard:hover .card-front {transform: rotateY(-180deg);} #test_flipcard:hover .card-back 
{transform: rotateY(0deg);}
.card-front {height: 100%; width: 100%; background-position: 50% 50%; background-size: cover; 
position: absolute; top: 0; left: 0; backface-visibility: hidden; transition: 0.5s; }
.card-back {height: 100%; width: 100%; position: absolute; top: 0; left: 0; background-color: 
#ffffff; backface-visibility: hidden; transform: rotateY(180deg); transition: 0.5s; color: #ffffff; 
text-align: center; margin: 0; display: flex; justify-content: center;
align-items: center;}
.card_back_text a {padding: 8px 16px; border-radius: 2px; line-height: 20px; font-size: 14px; 
font-weight: 700; color: #ffffff; background: #64A70B; text-transform: uppercase;
text-decoration: none;}
.card_back_text a:hover { color: #ffffff; background-color: #AB2328;}
.card_front_title {font-size: 25px; line-height: 34px; font-weight: 700; color:#ffffff; text-align: 
center; margin: 75px 25px 25px 25px; z-index: 1;}
.card_back_text {font-size: 16px;line-height: 22px; font-weight: 600; text-align: center; 
margin:25px; color:#ffffff;}
.flipcard_overlay {width:100%;height:100%; display: flex; justify-content: center; align-items: 
center;}
/*CUSTOM FLIPCARD - END*/

HTML - 

<div id="test_flipcard">
<div class="card-front" style="background-image:url(&quot;https://images.unsplash.com/photo-1523453462319-8c5bc9c9d3b3?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaW%20QiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1502&amp;q=80&quot;);">

<div class="flipcard_overlay" style="background:rgba(224,25,51,0.3);">
<div class="card_front_title">This is the main title on the front</div>
</div>
</div>
<div class="card-back">
<div class="card_back_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur blandit mattis. Ut suscipit euismod sodales<br /><br /><a href="https://www.traceinternational.org/tasa">call to action goes here</a></div>
</div>
</div>

Hello everyone,

I finally got this to work.

You’ll need to replace my URL in the HTML portion with an image of your own, but you should be able to directly copy and paste both the html and css. This is for a 1/3 row widget

HTML:

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="https://s3.us-east-2.amazonaws.com/docebo.traceinternational/_Site+Images/tasa+widget.jpg" alt="Avatar" style="width:443px;height:300px;" /></div>
    <div class="flip-card-back">
    <div class="align-items-center">
      <h1>I figured out flipcards!</h1>
      <p>Finally!</p>
     </div>
    </div>
  </div>
</div>

CSS:

.flip-card {
  background-color: transparent;
  width: 443px;
  height: 300px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

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

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

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: dodgerblue;
  color: #f5f5f5;
  transform: rotateY(180deg);
}