Flip-Card CSS/HTML: The back of the card is not showing when flipped

Question

Goal: I would like to have responsive cards within a container, or grid if it responds better, that flip. When flipped the card will show details about the person on the front of the card.

Tried: I am using W3Schools flip card information but the back does not show up. https://www.w3schools.com/howto/howto_css_flip_card.asp

Code: What I have so far.

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */

.flip-card {
   background-color: transparent;
   width: 20em;
   height: 29em;
   border: 1px solid #f1f1f1;
   perspective: 1000px;
   /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */

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

/* Do an horizontal flip when you move the mouse over the flip box container */

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

/* Position the front and back side */

.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;
}

/* Style the back side */

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

   <div class="container-fluid">
      <h1>About Us</h1>
      <div class="-card-deck card-columns">
         <!-- Card: Dad (Owner) -->
         <div id="dad-owner" class="card flip-card">
            <div class="flip-card-inner">
               <div class="flip-card-front">
                  <img class="img-fluid" src="<?= $pathStart ?>static/images/Dad3x4.png" alt="dad-owner">
                  <h4 class="card-title">Kyle Field</h4>
                  <p class="card-text">Owner</p>
               </div>
            </div>
            <div class="flip-card-back">
               <h4 class="card-title">About Me</h4>
               <hr>
               <p class="card-text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non
                  commodi
                  vel
                  eius veniam maxime?
               </p>
            </div>
         </div>

         <!-- Card: Kyle (Brother) -->
         <div id="kyle-brother" class="card flip-card">
            <div class="flip-card-inner">
               <div class="flip-card-front">
                  <img class="img-fluid" src="<?= $pathStart ?>static/images/KyleField3x4.png" alt="kyle-brother">
                  <h4 class="card-title">About Me</h4>
                  <p class="card-text">Brother</p>
               </div>
            </div>
            <div class="flip-card-back">
               <h4 class="card-title">About Me</h4>
               <p class="card-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur
                  odio suscipit non
                  commodi
                  vel
                  eius veniam maxime?</p>
            </div>
         </div>

         <!-- Card: Alix Field (Sister) -->
         <div id="alix-sister" class="card flip-card">
            <div class="flip-card-inner">
               <div class="flip-card-front">
                  <img class="img-fluid" src="<?= $pathStart ?>static/images/AlixField3x4.png" alt="alix-sister`">
                  <h4 class="card-title">Alix Field</h4>
                  <p class="card-text">Sister</p>
               </div>
            </div>
            <div class="flip-card-back">
               <h4 class="card-title">About Me</h4>
               <hr>
               <p class="card-text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non
                  commodi
                  vel
                  eius veniam maxime?
               </p>
            </div>
         </div>

         <!--  -->
         <div id="ramsey-besty" class="card flip-card">
            <div class="flip-card-inner">
               <div class="flip-card-front">
                  <img class="img-fluid" src="<?= $pathStart ?>static/images/RamseyBond3x4.png" alt="ramsey-besty">
                  <h4 class="card-title">Ramsey Bond</h4>
                  <p class="card-text">Besty</p>
               </div>
            </div>
            <div class="flip-card-back">
               <h4 class="card-title">About Me</h4>
               <p class="card-text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non
                  commodi
                  vel
                  eius veniam maxime?
               </p>
            </div>
         </div>
      </div>
   </div>

wahwahwah wahwahwah · Accepted Answer · 2020-09-21T18:58:27

The order of the nested div tags is important with the css rules:

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

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

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
       <img class="img-fluid" src="<?= $pathStart ?>static/images/Dad3x4.png" alt="dad-owner">
                  <h4 class="card-title">Kyle Field</h4>
                  <p class="card-text">Owner</p>
    </div>
    <div class="flip-card-back">
               <p class="card-text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non
                  commodi
                  vel
                  eius veniam maxime?
               </p>
    </div>
  </div>
</div>


<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
       <img class="img-fluid" src="<?= $pathStart ?>static/images/Dad3x4.png" alt="dad-owner">
                  <h4 class="card-title">Kyle Field</h4>
                  <p class="card-text">Owner</p>
    </div>
    <div class="flip-card-back">
               <p class="card-text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non
                  commodi
                  vel
                  eius veniam maxime?
               </p>
    </div>
  </div>
</div>

You want both the flip-card-front and flip-card-back divs nested within the flip-card-inner div:

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
    <div class="flip-card-back">

Flip-Card CSS/HTML: The back of the card is not showing when flipped

1 Answers