<div class="card">
  <img class="card-image" src="https://assets.codepen.io/4787486/man-in-suit-portrait.jpg" alt="" />
  <div class="text">
    <h1 class="split-text" data-splitting>You can't go wrong<br>with the right shoes
  </div>
  <div class="try-it">
    🔎
  </div>
  <!-- the magnifying glass -->
  <div class="magnifying-glass"></div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Italiana&display=swap");

.card {
  position: relative;
  display: grid;
  place-items: start center;
  width: calc(100% - 2rem);
  max-width: 25rem;
  background: radial-gradient(
    circle at 85% 85%,
    #e9a5cd,
    #d65ca3,
    #721d4f,
    #000
  );
  outline: 3px solid #284242;
  border-radius: 1rem;
  box-shadow: 0.5rem 0.5rem 3rem -0.75rem rgba(0 0 0 / 0.7);
  text-align: center;
  overflow: hidden;
}
.card > * {
  grid-area: 1/1;
}

.text {
  display: grid;
  place-items: center;
  width: 90%;
  margin-block-start: 7%;
}
.split-text .char {
  font-size: calc(1.4rem + 1vw);
  font-weight: 400;
  line-height: 2cap;
  color: #fff;
  translate: 4rem 0;
  opacity: 0;
}

/* magnifying glass icon at bottom of card */
.try-it {
  position: absolute;
  bottom: 0;
  font-size: 2rem;
  color: #fff;
  letter-spacing: 0.2rem;
  line-height: 3lh;
  scale: 0;
}

img {
  max-width: 100%;
  object-fit: cover;
  transform-origin: 90% 90%;
  clip-path: circle(2.5rem at 82% 82%);
  filter: brightness(1.3);
  scale: 1.5;
}

/* create magnify glass */
/* hide the default cursor */
.card:hover {
  cursor: none;
}
/* zoom into view from scale: 0; */
.card:hover > .magnifying-glass {
  scale: 1;
}
.magnifying-glass {
  position: absolute;
  bottom: -4.45rem;
  left: 23.2%;
  height: 220px;
  width: 220px;
  scale: 0;
  transition: scale 0.7s ease;
  border-radius: 50%;
  background: transparent;
  background-image: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0.1) 25%,
      transparent 50%
    ),
    radial-gradient(ellipse, rgba(210, 210, 210, 0.7) transparent 50%),
    radial-gradient(ellipse, rgba(210, 210, 210, 0.7) transparent 50%),
    radial-gradient(ellipse, rgba(210, 210, 210, 0.4) transparent 50%),
    radial-gradient(ellipse, rgba(210, 210, 210, 0.5) transparent 50%),
    radial-gradient(ellipse, rgba(210, 210, 210, 0.7) transparent 50%),
    radial-gradient(ellipse, rgba(210, 210, 210, 0.5) transparent 50%),
    radial-gradient(ellipse, rgba(0, 0, 0, 0.1), transparent 60%),
    radial-gradient(ellipse, rgba(0, 0, 0, 0.2) transparent 60%),
    radial-gradient(ellipse, rgba(57, 57, 57, 0.5), transparent 50%),
    radial-gradient(ellipse, rgba(57, 57, 57, 0.5), transparent 50%),
    radial-gradient(ellipse, rgba(109, 109, 109, 0.1), transparent 50%),
    radial-gradient(ellipse, rgba(121, 121, 121, 0.2), transparent 50%);
  background-size:
    /* shine */ 100px 100px, /* light */ 100px 100px, 100px 100px,
    100px 100px, 100px 100px, 200px 200px, 200px 200px, 200px 200px, 200px 200px,
    /* dark */ 100px 100px, 120px 120px, 120px 120px, 120px 120px, 120px 120px,
    120px 120px;
  background-position:
    /* shine */ 58% -55, /* light small */ -15% 90%, -5% 100%,
    5% 110%, 20% 120%, /* light big */ -70% 170%, -35% 210%, -10% 215%, 80% 225%,
    /* dark */ -35% 25%, -10% 30%, 135% 15%, 80% -45%, 15% 40%, 75% 80%;
  background-repeat: no-repat;
  box-shadow: inset 1px 2px 4px 3px rgba(255, 255, 255, 0.3),
    inset 1px 2px 3px 2px rgba(255, 255, 255, 0.05),
    inset 0px -40px 47px -18px rgba(0, 0, 0, 0.2),
    inset -5px 5px 8px 0px rgba(0, 0, 0, 0.7),
    inset -30px 15px 20px -10px rgba(0, 0, 0, 0.25),
    inset -10px 10px 30px -5px rgba(0, 0, 0, 0.7),
    inset -10px 10px 10px -5px rgba(0, 0, 0, 0.3),
    inset 50px -50px 20px -10px rgba(108, 108, 108, 0.1),
    1px 3px 8px 1px rgba(0, 0, 0, 0.4), 15px 38px 20px -30px rgba(0, 0, 0, 0.5),
    0px 0px 3px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.orb-glass:before {
  /* left gloss */
  content: "";
  position: absolute;
  top: 37px;
  left: 7px;
  height: 26px;
  width: 56px;
  border: 20px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.5);
  border-radius: 50% 50% 0 0;
  transform: rotate(298deg);
  background: transparent;
  filter: blur(3px);
  mix-blend-mode: screen;
}

.orb-glass:after {
  /* right gloss */
  content: "";
  position: absolute;
  top: 58px;
  right: -3px;
  height: 26px;
  width: 56px;
  border: 20px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.4);
  border-radius: 50% 50% 0 0;
  transform: rotate(85deg);
  background: transparent;
  filter: blur(3px);
  mix-blend-mode: screen;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(to bottom right, #000, #0000),
    radial-gradient(circle at 0 100%, #cc338b, #284242);
  font-family: "Italiana", serif;
}

Splitting({
  whitespace: true
});

console.clear();
var tl = gsap.timeline({});
tl
  .to(".split-text .char", {
    x: 0,
    opacity: 1,
    duration: 1,
    delay: 0.5,
    stagger: {
      amount: 1.5,
      from: "start"
    }
  })
  .to(
    "img",
    {
      filter: "brightness(1)",
      clipPath: "circle(25rem at 82% 82%)",
      scale: 1,
      duration: 3,
      ease: "expo.inOut"
    },
    "-=2"
  )
  /* magnifying glass icon at bottom of card */
  .to(".try-it", {
    scale: 1,
    duration: 0.5,
    ease: "back.out(4)"
  })
  .to(
    ".try-it",
    {
      rotate: 15,
      transformOrigin: "bottom left",
      duration: 0.5,
      repeat: 5,
      yoyo: true,
      ease: "none"
    },
    "+=1"
  );

/* the magnifying glass */
$(document).ready(function () {
  var sub_width = 0;
  var sub_height = 0;
  $(".magnifying-glass").css(
    "background",
    "url('" + $(".card-image").attr("src") + "') no-repeat"
  );

  $(".card").mousemove(function (e) {
    if (!sub_width && !sub_height) {
      var image_object = new Image();
      image_object.src = $(".card-image").attr("src");
      sub_width = image_object.width;
      sub_height = image_object.height;
    } else {
      var magnify_position = $(this).offset();

      var mx = e.pageX - magnify_position.left;
      var my = e.pageY - magnify_position.top;

      if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) {
        $(".magnifying-glass").fadeIn(100);
      } else {
        $(".magnifying-glass").fadeOut(100);
      }
      if ($(".magnifying-glass").is(":visible")) {
        var rx =
          Math.round(
            (mx / $(".card-image").width()) * sub_width -
              $(".magnifying-glass").width() / 3
          ) * -1;
        var ry =
          Math.round(
            (my / $(".card-image").height()) * sub_height -
              $(".magnifying-glass").height() / 3
          ) * -1;

        var bgp = rx + "px " + ry + "px";

        var px = mx - $(".magnifying-glass").width() / 2.5;
        var py = my - $(".magnifying-glass").height() / 2.5;

        $(".magnifying-glass").css({ left: px, top: py, backgroundPosition: bgp });
      }
    }
  });
});