<div id="mainWrapper">
  <div id="cardsWrapper">
    
    <div class="card">
      <div class="image first">
        <div class="screen"></div>
        <div class="text">
            <p>Mountain</p>
            <p>5 Days</p>
        </div>
      </div>
    </div>
    
    <div class="card">
      <div class="image second">
        <div class="screen"></div>
        <div class="text">
            <p>Island</p>
            <p>2 Days</p>
        </div>
      </div>
    </div>
    
  </div>  
</div>
#mainWrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 350px;
}

#cardsWrapper{
  display: flex;
  justify-content: space-between;
  width: 700px;
  
}

.card{
  width: 300px;
  height: 175px;
  perspective: 500px;
  position: relative;
}

.image{
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(30deg) rotateY(30deg);
}

.image.first{
  background-image: url("https://c1.staticflickr.com/1/343/31652757460_b2b5794a51_n.jpg");
}

.image.second{
  background-image: url("https://c2.staticflickr.com/2/1506/25121644830_2d768ef51a_n.jpg");
}

.screen{
  background-color: rgba(0, 0, 0, 0.22);
  width: 100%;
  height: 100%;
  transform: translateZ(30px) scale(0.940);
}

.text{
  position: absolute;
  bottom: 25px;
  left: 30px;
  color: white;
  transform: translateZ(30px) scale(0.940);
}

.text p{
    cursor: default;
    padding: 0;
    margin: 0;
}

.text p:first-of-type{
    font-size: 2em;
    margin-bottom: 5px;
}
.text p:last-of-type{
    font-size: 1em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.