How to Add An Animated Flip Card in Squarespace with CSS

We love animated flip cards like this for a fun text effect that you don't normally experience in a Squarespace site:



What's behind the card?



Literally, nothing helpful. Sorry. But you can put whatever you want back here.



What's behind the card?



Literally, nothing helpful. Sorry. But you can put whatever you want back here.

And all you need to do to add them is add the following into Advanced CSS:

// entire container, keeps perspective //
.flip-container {
  -webkit-perspective: 1000;
  background: #f1f1f1;
  margin: 100px auto;}

// flip the pane when clicked //
.flip-container:hover .flipper, .flip-container.hover .flipper {
  -webkit-transform: rotateY(180deg);}

.flip-container {
width: 100%;
height: 300px;}

.front, .back
{width: 100%;
height: auto;
height: 300px;}

// flip speed goes here //
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
position: relative;}
// hide back of pane during swap //
.front, .back {
-webkit-backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;}
// front pane, placed above back //
.front {
z-index: 2;
background: #666666;}
// back, initially hidden pane //
.back {
-webkit-transform: rotateY(180deg);
background: #333333;}

// optional, style text //

.flip-text h2, .flip-text p, .flip-text h1, .flip-text h2, .flip-text h3, .flip-text a
{text-align: center;
color: #ffffff;
padding-top: 100px;
padding-bottom: 100px;
padding-right: 25px;
padding-left: 25px;}

And then implement them using code blocks with code like this:

<div class="flip-container">
<div class="flipper">
<div class="front">
<div class="flip-text">
<h2>
What's behind the card?
</h2>
</div>
</div>
<div class="back">
<div class="flip-text">
<p>
Literally, nothing helpful. Sorry. But you can put whatever you want back here.
</p>
</div>
</div>
</div>
</div>

For more Advanced Styling options, try these:

Image
TITLE




Literally, nothing helpful. Sorry. But you can put whatever you want back here.

If you want to add an image or other item to the card - you can use normal html. For example, you could insert an image like this: 

//The full code for this card increases the size to accommodate the photo//

<div class="flip-container" style="min-height:450px;">
<div class="flipper">
<div class="front" style="min-height:450px;">
<div class="flip-text">
<center><h2><img src="https://static1.squarespace.com/static/597fe97144024358e2c8dbc6/t/5ab3f63c2b6a28b3781c905d/1521743423814/" alt="Image"><br>TITLE</h2><br></center>
</div>
</div>
<div class="back" style="min-height:450px;">
<div class="flip-text">
 <br><br>
<p>Literally, nothing helpful. Sorry. But you can put whatever you want back here.</p>
</div>
</div>
</div>
</div>


TITLE




Literally, nothing helpful. Sorry. But you can put whatever you want back here.

You could also set the background of the cards as images with the Property "background-image" like this:

<div class="flip-container" style="min-height:450px;">
<div class="flipper">
<div class="front" style="min-height:450px; background-image:url(https://static1.squarespace.com/static/597fe97144024358e2c8dbc6/t/5ab3f63c2b6a28b3781c905d/1521743423814/); background-repeat:no-repeat; background-size: cover;">
 <div class="flip-text">
 <center><h2 style="font-size: 40px; color: #333;">
<br>TITLE</h2><br> </center>
</div>
</div>
<div class="back" style="min-height:450px;">
<div class="flip-text">
<br><br>
<p>Literally, nothing helpful. Sorry. But you can put whatever you want back here.</p>
</div>
</div>
</div>
</div>

 

Have you utilized flip card animation in your Squarespace website with CSS? Comment below with your example links!