<div class="cards-item">
  <img src="https://via.placeholder.com/100">
  <div class="item-title">Choose Destination</div>
  <div class="item-subtitle">Lorem Ipsum is simply dummy text of the printing setting</div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap');

body {
  display: flex;
  justify-content: center;
  align-items: center;
  
  margin: 0 auto;
  padding: 0 20px;
  
  height: 100vh;
  weight: 100vw;
  
  background: white;
}

.cards-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  
  margin-right: 30px;

  background: #f8f8f8;
  
  width: 326px;
  height: 326px;

  img {
    margin: 44px 0 24px;

    width: 100px;
    height: 100px;
  }

  .item-title {
    margin-bottom: 20px;
    width: 250px;

    text-align: center;

    line-height: 33px;
    color: #2c2c2c;

    font-family: 'Noto Serif', serif;
    font-size: 24px;
    font-weight: bold;
    font-style: normal;
  }

  .item-subtitle {
    width: 250px;

    text-align: center;

    line-height: 26px;
    color: #a79997;

    font-family: 'PT Sans', sans-serif;
    font-size: 18px;
    font-weight: normal;
    font-style: normal;
  }
}

import anime from "https://cdn.skypack.dev/animejs@3.2.1";

const cards = document.querySelectorAll('.cards-item');

const setDropShadow = (el, shadow) => {
  el.style.filter = `drop-shadow(
    ${shadow.offsetX}px ${shadow.offsetY}px
    ${shadow.blurRadius}px ${shadow.shadowColor})`;
}

cards.forEach((card) => {
  const animationTarget = {
    offsetX: 0,
    offsetY: 0,
    blurRadius: 0,
    shadowColor: 'rgba(0, 0, 0, 0)',
  };
  
  const render = (anim) => {
    setDropShadow(card, anim.animatables[0].target);
  };
  
  card.addEventListener('mouseenter', (event) => {
    anime({
      targets: animationTarget,
      offsetX: 0,
      offsetY: 12,
      blurRadius: 30,
      shadowColor: 'rgba(200, 180, 180, 0.9)',
      easing: 'easeInOutQuad',
      update: render
    });
  });

  card.addEventListener('mouseleave', (event) => {
    anime({
      targets: animationTarget,
      offsetX: 0,
      offsetY: 0,
      blurRadius: 0,
      shadowColor: 'rgba(0, 0, 0, 0)',
      easing: 'easeInOutQuad',
      update: render
    });
  });
});