5003–Parallax flipping effect

Requirement

We want to create the following hover effect:

Given the following HTML:

<h1>Demo</h1>
<ul class='grid'>
  <li>  
    <div class="card">
      <h2>Box 1</h2>   
      <div class="overlay"></div>
      <img src="https://unsplash.it/500/500?image=436" alt="Background" />
      <div class="back-side">
        <a href="#">Learn More</a>
      </div>
    </div>
  </li>
  <li>  
    <div class="card">
      <h2>Box 2</h2>    
      <div class="overlay"></div>
      <img src="https://unsplash.it/500/500?image=437" alt="Background" />
      <div class="back-side">
        <a href="#">Learn More</a>
      </div>
    </div>
  </li>
  <li>  
    <div class="card">
      <h2>Box 3</h2>    
      <div class="overlay"></div>
      <img src="https://unsplash.it/500/500?image=441" alt="Background" />
      <div class="back-side">
        <a href="#">Learn More</a>
      </div>
    </div>
  </li>
</ul>
<p><small>Note: You may need <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style">transform-style: preserve-3d</a></code> to achieve the effect.</small></p>