link(href="https://fonts.googleapis.com/css?family=Macondo+Swash+Caps" rel="stylesheet")

.card
  .card__img-wrapper
    img.card__img(src="https://i.pinimg.com/originals/69/59/fa/6959fa736605235642d0f057e6cf9795.jpg")
  p.card__title Forest Road

*{
  padding: 0;
  margin: 0;
  will-change: transform;
}

body {
  background: linear-gradient(to bottom, #355c7d, #6c5b7b, #c06c84);
  display: flex;
  flex-flow: row;
  height: 100vh;
  perspective: 1000px;
  transform-style: preserve-3d;
  overflow: hidden;
  font-family: 'Macondo Swash Caps', cursive;
}

.card {
  margin: auto;
  position: relative;
  $self: &;
 
  &__img-wrapper {
    border-radius: 15px;
    width: 300px;
    height: 450px;
    background: transparent;
    overflow: hidden;
  }
  
  &__img {
    display: block;
    margin: -20% 0 0 -20%;
    width: 140%;
    height: 140%;
    object-fit: cover;
    backface-visible: hidden;
    vertical-align: middle;
  }
  
  &__title {
    position: absolute;
    bottom: 0;
    color: #fff;
    padding: 5px;
    font-size: 30px;
    width: 100%;
    transition: all .3s ease;
    cursor: default;
    background: transparent;
  }
  
  &:hover {
    #{$self}__img-wrapper {
      box-shadow: 0 0 8px rgba(#000, .9);
    }

    #{$self}__title {
      transform: translateY(100%);
      font-size: 40px;
    }
  }
}

$(function(){
  $('.card').mousemove(function(ev){
    
    let parentWidth = $(this).width();
    let parentHeight = $(this).height();
    let mouseX = ev.pageX - $(this).offset().left;
    let mouseY = ev.pageY - $(this).offset().top;
    let x = (parentWidth/2 - mouseX)/15;
    let y = -(parentHeight/2 - mouseY)/15;
    
    $(this).css({
      'transform': 'rotateX('+y+'deg) rotateY('+2*x+'deg) translateZ(50px)',
      'transition': 'all .15s ease'
    });
    
    $(this).find('.card__img').css({
      'transform': 'scale(1.05) translateX('+ -5*x +'px) translateY('+ -5*y +'px)',
      'transition': 'all .15s ease'
    });
  });
  
  $('.card').mouseleave(function(ev) {
    $(this).css({
      'transform': 'rotateX(0) rotateY(0)',
      'transition': 'all .6s ease'
    });
    
    $(this).find('.card__img').css({
      'transform': 'scale(1) translateX(0px) translateY(0px) translateZ(0)',
      'transition': 'all .6s ease'
    });
  });
})