<link href="https://fonts.googleapis.com/css?family=Quicksand:400,500" rel="stylesheet"/>

<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);
  font-family: 'Quicksand', sans-serif;
}

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

.text p:first-of-type{
    font-size: 2em;
    margin-bottom: 5px;
    font-weight: 500;
}
.text p:last-of-type{
    font-size: 1em;
    font-weight: 400;
}
$(function(){
    var card = $(".card");
    card.on('mousemove', function (e) {
        var x = e.clientX - $(this).offset().left + $(window).scrollLeft();
        var y = e.clientY - $(this).offset().top + $(window).scrollTop();
        
        var rY = map(x, 0, $(this).width(), -17, 17);
        var rX = map(y, 0, $(this).height(), -17, 17);
    
        $(this).children(".image").css("transform", "rotateY(" + rY + "deg)" + " " + "rotateX(" + -rX + "deg)");
    });
    
    card.on('mouseenter', function () {
        $(this).children(".image").css({
            transition: "all " + 0.05 + "s" + " linear",
        });
    });

    card.on('mouseleave', function () {
        $(this).children(".image").css({
            transition: "all " + 0.2 + "s" + " linear",
        });

        $(this).children(".image").css("transform", "rotateY(" + 0 + "deg)" + " " + "rotateX(" + 0 + "deg)");
    });
        
    function map(x, in_min, in_max, out_min, out_max)
    {
        return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
    }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js