<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>
ul.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  
  li {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 200px;
    overflow: hidden;
    perspective: 300px;
    perspective-origin: 50% 50%;
    
    .card {      
      transition: all 0.3s ease-out;
      transform-style: preserve-3d;
      width: 100%;
      height: 100%;
    }
    
    h2 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform: translate3d(0,0,3em);
      z-index: 999;
      text-align: center;      
      margin: 0;
      margin-top: 43%;
      
      text-shadow: 0 0 5px rgba(255,255,255,.8);
      
      span {
        display: block;
      }
      
    }
    .overlay {
      border-radius: 50%;
      background: rgba(255,255,0,.6);
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;      
      transform: scale(0.5) translate3d(0,0,2em);
    }
    img {      
      position: absolute;
      top: 0;
      left: 0;
      object-fit: cover;
      transform: translate3d(0,0,1em);
      width: 100%;
      height: 100%;
    }
    
    .back-side {
      backface-visibility: hidden;
      transform: rotate3d(0,1,0,180deg);
      display: flex;
      width: 100%;
      height: 100%;
      
      a {
        display: block;
        margin: auto;
        padding: 1em;
        background: #333;
        text-decoration: none;
        border-radius: 5px;
        color: #efefef;
        box-shadow: 0 1px 8px rgba(255,255,255,.2);
        
        transition: all 0.3s ease-out;
        
        &:hover {
          background: black;
          box-shadow: 0 1px 8px rgba(255,255,255,.5);
        }
      }
    }
  }
  
  li:hover {
    .card {
      transform: rotate3d(0,1,0,180deg);
    }
  }
}

body {
  padding: 1em;
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.