How can I create Responsive Flip Cards with Only CSS?

Question

I'm using some CSS I found in the wild to make flip cards. I've made a few adjustments in an attempt to make them fluidly responsive. My attempt is here:

https://jsfiddle.net/u18rhf6q/

css:

    .flip-card-wrapper {
    width: 50%;
 height: auto;

}

.flip-card {
  background-color: transparent;
  width: 100%;
  height: 100%;
  perspective: 1000px;
}

.flip-card img {
        width: 100%;
        height: auto;
    }

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

}

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

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

.flip-card-front {

  color: black;
}

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

html

<div class="flip-card-wrapper" >
  <div class="flip-card" >
    <div class="flip-card-inner">

      <div class="flip-card-front">
        <img src="https://dummyimage.com/600x600/000/fff" alt="Avatar" >
      </div>
      <div class="flip-card-back">
        <h1>John Doe</h1>
        <p>Architect & Engineer</p>
        <p>We love that guy</p>
      </div>
    </div>
  </div>
</div>

What I hope to happen is if I adjust the width of flip-card-wrapper, the contents would expand relative to that width and the flip would continue. However, it only works if I also supply a height to flip-card-wrapper. Since the front and back are both absolute, I can't a height to bubble up. Any ideas?

Lauren Ashpole Lauren Ashpole · Accepted Answer · 2020-03-02T20:38:33

One possibility for keeping your card height responsive might be to set a padding-bottom or padding-top on your flip-card-inner class. Since those heights are based on the parent's width when you use a percentage, padding-bottom: 100%; should create a perfect square. If you want to play around with the sizing, there's a good overview of aspect ratio boxes at https://css-tricks.com/aspect-ratio-boxes/.

How can I create Responsive Flip Cards with Only CSS?

1 Answers