<div class="background">
  <img src="https://i.gifer.com/Ij0J.gif" alt="">
  <div class="card">
    <p>MY CARD</p>
    <p class="card-number">4242 8224 6317 0005</p>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js"></script>
.card {
  position: absolute;
  top: 50%;
  left:50%;
  width: 300px;
  height: 180px;
  padding: 10px;
  border-radius: 20px;
  color: #fff;
  font-size: 18px;
  background: rgba(255,255,255,0.1);
  box-shadow: 10px 10px 20px -10px rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(255,255,255,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  transition: .5s ease;
}

.card-number {
  position: absolute;
  bottom: 10%;
  letter-spacing: 5px;
}

body {
  position: relative;
  width: 100%;
  height: 100vh;
  background:#000;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  flex-wrap: wrap;
}
VanillaTilt.init(document.querySelectorAll(".card"), {
		max: 25,
        speed: 400,
        easing:"cubic-bezier(.05,.80,.60,.99)",
        perspective:500,
        transition:true
    });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.