Hoverable Shadow

HoverableShadow.scss

.hoverable-shadow {
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
  transition-duration: 0.5s;
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
    backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  &:hover {
    &::after {
      position: absolute;
      content: "";
      top: 8%;
      left: 0;
      right: 0;
      z-index: -1;
      height: 90%;
      width: 100%;
      transform: scale(0.95) translateZ(0);
      filter: blur(15px);
      background: linear-gradient(
        to left,
        #ff5770,
        #e4428d,
        #c42da8,
        #9e16c3,
        #6501de,
        #9e16c3,
        #c42da8,
        #e4428d,
        #ff5770
      );
      background-size: 200% 200%;
      animation: animateGlow 1.25s linear infinite;
    }
  }
}

@keyframes animateGlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}