HTML/CSS Flip Card Works on Desktop but not Mobile

I am helping a friend with a basic html/css site and we are having trouble with setting up a flip card effect.

You can see it here: https://www.fragranceadvisorjobs.com/ Those tiles in the middle section flip when hovered over and reveal information about the brand. It seems to be working just fine on desktop and using Chrome's responsive viewer.

However, when I visit the site on my mobile device (ios), it does the flip effect but doesn't show whats on the back of the card.

.flip-card {
  background-color: transparent;
  width: 32%;
  display: inline-block;
  height: 200px;
  perspective: 1000px;
  padding-left: 1px;
  padding-right: 1px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  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 {
  color: black;
}

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

@media (max-width: 768px) {
  .flip-card {
        height: 180px;
    }
}

@media (max-width: 425px) {
    .flip-card {
        width: 98%;
        height: 150px;
    }
}

 <div class="flip-card">
  <div class="flip-card-inner" style="background-color: #000">
    <div class="flip-card-front">
     <div class="logo_rowthird" ><img src="https://www.fragranceadvisorjobs.com/images/logos/lorealwhite.svg" alt="atelier" style="max-height: 80px;" class="shadow"></div></div>
     <div class="flip-card-back">
      <h1>L'Oreal Luxe</h1> 
       <p>“L’Oréal Luxe opens a unique world of beauty. Its international brands incarnate all the facets of elegance and refinement in three major specializations: skin care, make-up and perfume.</p>
    </div>
     </div></div>

I have created a code pen with the coding we have used for this set up https://codepen.io/MarioDidIt/pen/rNxQVaw

Whats weird is the code in the code pen is exactly whats on the site, and it works on the site just fine but in the code pen it doesn't reveal anything for the back side. Im guessing code pen is reading it the same way the ios browser does.

Does anyone know what I can do to fix this issue? Any help is greatly appreciated!

Solution

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

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

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card: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 {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}
</style>
</head>
<body>

<h1>Card Flip with Text on Back</h1>
<h3>Hover over the image on a desktop to see the back</h3>
<h3>Click on the image on mobile to see the back</h3>

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="https://via.placeholder.com/300" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
      <h1>Content Header</h1> 
      <p>Content Part I</p> 
      <p>Content Part II</p>
    </div>
  </div>
</div>

</body>
</html>

This should hopefully help. :-)