body
  .container
    .card.js-hover-parallax
      .hover-image
        img(src="https://picsum.photos/id/1027/600/600", alt="")
      .text
        |Pallax<br>Hover Effect

* {
  margin: 0;
  padding: 0;
}

body {
  background: #eee;
  color: #333;
  width: 100vw;
  height: 100vh;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  width: 400px;
  height: 400px;
  position: relative;
}

.hover-image {
  border-radius: 8px;
  overflow: hidden;
  object-fit: cover;
  pointer-events: none;
  transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.84);
  img {
    border-radius: 8px;
    transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.84);
  }
}

.text {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  color: #eee;
  font-weight: 700;
  font-size: 40px;
  width: 100%;
  text-align: center;
  mix-blend-mode: difference;
}

// hover
.card {
  --x: 0;
  --y: 0;
  --d: 50;
  &:hover {
    .hover-image {
      scale: 1.025;
      translate: calc(var(--x) / var(--d) * 1px)
                  calc(var(--y) / var(--d) * 1px);
    }
  }
}

.hover-image img {
  --d: 30;
  translate: calc(var(--x) / var(--d) * 1px)
              calc(var(--y) / var(--d) * 1px);
}

class HoverParallax {
  constructor() {
    this.els = document.querySelectorAll('.js-hover-parallax');
    if (!this.els) return;

    this.init();
  }
  init() {
    this.els.forEach(card => {
      card.addEventListener('mousemove', (e) => this.MouseMoveEvent(e, card));
      card.addEventListener('mouseleave', () => this.MouseLeaveEvent(card));
    })
  }
  MouseMoveEvent(e, card) {
    const target = e.target;
    const r = target.getBoundingClientRect();

    card.style.setProperty('--x', e.clientX - (r.left + Math.floor(r.width / 2)));
    card.style.setProperty('--y', e.clientY - (r.top + Math.floor(r.height / 2)));
  }
  MouseLeaveEvent(card) {
    card.style.setProperty('--x', 0);
    card.style.setProperty('--y', 0);
  }
}

new HoverParallax();