How to Create Flip Cards in CamBuildr (Image-Based Hover Flip Effect)

Flip cards are a great way to display two sides of visual content in an interactive, space-efficient way. They allow you to reveal additional information, graphics, or links on hover—perfect for comparisons, highlights, or alternative views of a concept.

What This Setup Does

Renders interactive image cards that flip horizontally on hover.
Each card shows one image on the front and another on the back.
Fully responsive and works well in a 3-column layout.
Optimized for desktop hover interaction; mobile fallback is graceful (no flip).

Step 1: Insert the Flip Card HTML

Add this HTML block to any row or column where you want the flip card to appear:

<div style="padding: 10px;">
  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <img class="flip-card-image" src="FRONT_IMAGE_URL">
      </div>
      <div class="flip-card-back">
        <a href="BACK_IMAGE_URL" target="_blank">
          <img class="flip-card-image" src="BACK_IMAGE_URL">
        </a>
      </div>
    </div>
  </div>
</div>

Replace FRONT_IMAGE_URL and BACK_IMAGE_URL with your image links.

You can duplicate this block for multiple cards in a row.

Step 2: Add the Flip Card CSS

Paste the following <style> tag into the same HTML block, or a custom CSS block at the top of your page:

<style>
  .flip-card {
    position: relative;
    background-color: transparent;
    width: 100%;
    perspective: 1000px;
  }

  .flip-card::before {
    content: '';
    height: 0;
    padding-top: 100%; /* makes it square */
    display: block;
  }

  .flip-card-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .flip-card-inner {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 1.0s;
    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%;
    backface-visibility: hidden;
  }

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

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

  @media only screen and (min-width: 601px) {
    .flip-card:hover .flip-card-back {
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
    }
  }

  /* Optional layout clean-up */
  .bee-row-9 .bee-col-1,
  .bee-row-9 .bee-col-2,
  .bee-row-9 .bee-col-3 {
    padding: 0;
  }

  @media only screen and (max-width: 600px) {
    .bee-row-9 .bee-col-1,
    .bee-row-9 .bee-col-2,
    .bee-row-9 .bee-col-3 {
      padding: 15px;
    }
  }

  .bee-row-content .bee-col-w7 {
    flex-basis: 33.3333% !important;
  }
</style>

Step 3: Layout & Spacing Considerations

This setup assumes a 3-column layout (each card in .bee-col-w7).
The flip card container is square by default (padding-top: 100%). You can change this to 56.25% for a 16:9 format if needed.
On mobile, hover interactions do not occur, but the front image remains visible.

Example Use Cases

Before/After diagrams
Comparison cards (e.g., “What we found” vs. “What we did”)
Front: visual; Back: download link or CTA
Multiple flip cards in a grid

Tips

You can add text overlays or buttons to the card back using standard HTML inside .flip-card-back.
For best results, use images of identical dimensions on both sides.
Avoid heavy content on the card back for mobile fallback.

How to Add an Image Slider (Carousel) in CamBuildr