How to Make Flip-on-Hover Cards in Squarespace

Flip cards are a fun little detail. On the front, a short title. Hover over it and the whole card spins around to reveal more, like a description, a price or a call to action.

They are great for services, team members, features or anything where you want a tidy grid on the surface and a bit more to discover underneath. Squarespace does not have flip cards built in, but you can add them with a Code Block. Let’s dive in!

What we are building

• A responsive grid of cards that sits three across on desktop and stacks on smaller screens.
• A smooth 3D flip when you hover, or when you tab to a card with your keyboard.
• Tap to flip on phones and tablets, because touch screens have no hover.
• No flip animation for visitors who have reduced motion turned on.

How to add it in Squarespace 7.1

1. Click Edit on the page where you want the cards.
2. Add a Code block in the section you want.
3. Turn Display Source off.
4. Paste in the code below and save.
5. Open the live page to see it in action (Code Blocks do not run inside the editor).

The code

<div class="sdl-flips">
  <div class="sdl-flip" tabindex="0">
    <div class="sdl-flip-inner">
      <div class="sdl-face sdl-front"><h3>Design</h3></div>
      <div class="sdl-face sdl-back"><p>Layouts that feel like your brand and work on every screen.</p></div>
    </div>
  </div>
  <div class="sdl-flip" tabindex="0">
    <div class="sdl-flip-inner">
      <div class="sdl-face sdl-front"><h3>Build</h3></div>
      <div class="sdl-face sdl-back"><p>Clean, fast Squarespace sites with a little custom code where it counts.</p></div>
    </div>
  </div>
  <div class="sdl-flip" tabindex="0">
    <div class="sdl-flip-inner">
      <div class="sdl-face sdl-front"><h3>Launch</h3></div>
      <div class="sdl-face sdl-back"><p>Checklists, testing and a smooth handoff, so launch day is calm.</p></div>
    </div>
  </div>
</div>

<style>
.sdl-flips { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.sdl-flip { height: 260px; perspective: 1000px; cursor: pointer; }
.sdl-flip-inner { position: relative; width: 100%; height: 100%; transition: transform 0.7s; transform-style: preserve-3d; }
.sdl-flip:hover .sdl-flip-inner,
.sdl-flip:focus .sdl-flip-inner,
.sdl-flip.is-flipped .sdl-flip-inner { transform: rotateY(180deg); }
.sdl-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; text-align: center; border-radius: 16px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.sdl-front { background: #dae2cb; color: #1f1f1f; }
.sdl-back { background: #1f1f1f; color: #ffffff; transform: rotateY(180deg); }
.sdl-face h3, .sdl-face p { margin: 0; }
@media (prefers-reduced-motion: reduce) { .sdl-flip-inner { transition: none; } }
</style>

<script>
// Tap to flip on phones and tablets (they have no hover)
document.querySelectorAll('.sdl-flip').forEach(function (card) {
  card.addEventListener('click', function () { card.classList.toggle('is-flipped'); });
});
</script>

Editing the words

Each card has two faces. The front is the part with sdl-front and the back is the part with sdl-back. Change the words inside the h3 (the front) and the p (the back). To add a fourth card, copy one whole sdl-flip block and paste it under the last one. The grid sorts out the rest.

Want a button or link on the back? Add one inside the back face, for example <a href="/contact">Get in touch</a>. One thing to know: on a phone, tapping a link flips the card as well as following the link, which is fine for most uses.

Customizing the look

How it works

Each card is a box with a little bit of 3D perspective. Inside it sits a second box that holds the two faces stacked back to back. The back face starts already rotated 180 degrees, and backface-visibility: hidden hides whichever face is pointing away from you. When you hover, the inner box rotates 180 degrees, which swaps which face you can see.

The few lines of script at the bottom are only for touch devices. They toggle a class when you tap, and the CSS treats that class exactly like a hover.

Common problems

Both sides show at the same time, or the back looks mirrored

This usually means the backface-visibility lines got lost in copying. Make sure both the standard line and the one starting with -webkit- are there, since Safari needs the second one.

The card text is cut off

The card height is fixed, so long text can overflow. Make the cards taller, shorten the text, or reduce the font size on the back face.

It does not flip on my phone

Tap once on the card. If nothing happens, check you are viewing the live page and not the editor preview, and that you copied the script at the bottom.

The cards are not lined up with the rest of my page

Code Blocks follow the width of the section you place them in. If you want them wider or narrower, change the section’s content width in your Squarespace section settings.

Want more flip options?

Our Flip Box plugin adds seven flip directions and a visual generator, so you can set it all up without touching the code. You will find it in the plugin collection.

Want more snippets like this one? Browse the Code Vault, our library of ready-to-paste Squarespace code, with one payment and lifetime access.

Why this post? It answers one of the questions Squarespace users ask most in the community forums. The code above is free to use and change, and every snippet was tested before we published it.