<div class="items">
  <div class="item">
    <div class="img">
      <img src="https://images.pexels.com/photos/2690323/pexels-photo-2690323.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
      <div class="link">
        <a href="#">Подробнее</a>
      </div>
    </div>
  </div>

  <div class="item">
    <div class="img">
      <img src="https://images.pexels.com/photos/163497/pylon-flight-girl-model-163497.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
      <div class="link">
        <a href="#">Подробнее</a>
      </div>
    </div>
  </div>

  <div class="item">
    <div class="img">
      <img src="https://images.pexels.com/photos/1030870/pexels-photo-1030870.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
      <div class="link">
        <a href="#">Подробнее</a>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.2/vanilla-tilt.min.js" integrity="sha512-K9tDZvc8nQXR1DMuT97sct9f40dilGp97vx7EXjswJA+/mKqJZ8vcZLifZDP+9t08osMLuiIjd4jZ0SM011Q+w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5vw;
  padding: 0 40px;
}

.item,
.item img {
  border-radius: 50%;
}

.item {
  position: relative;
  transition: 0.34s linear;
}

.item a {
  text-decoration: none;
  color: #777;
  background: #fff;
  text-align: center;
  position: absolute;
  top: 70%;
  left: 50%;
  padding: 6px 10px;
  transform: translate(-50%, 0);
  border-radius: 20px;
  font-family: sans-serif;
  font-size: 0.8em;
}

let item = document.querySelectorAll(".items .item");

item.forEach(function (el) {
  el.setAttribute("data-tilt", "");
  el.setAttribute("data-tilt-max", 20);
  el.setAttribute("data-tilt-speed", 1200);
  el.setAttribute("data-tilt-perspective", 500);
});

VanillaTilt.init(document.querySelectorAll(".item"));