Radial Glow under cursor on box hover over effect

Radial Glow under cursor on box hover over effect Demo

View Demo Full Screen View Demo New Tab

Radial Glow under cursor on box hover over effect Code

HTML

<div class="box-wrap">
   <div class="box">
     <a href="#" class="box-content">
       <strong>Box Title</strong>
       <span>Box Content</span>
     </a>
   </div>
   <div class="box">
     <a href="#" class="box-content">
       <strong>Box Title</strong>
       <span>Box Content</span>
     </a>
   </div>
   <div class="box">
     <a href="#" class="box-content">
       <strong>Box Title</strong>
       <span>Box Content</span>
     </a>
   </div>
   <div class="box">
     <a href="#" class="box-content">
       <strong>Box Title</strong>
       <span>Box Content</span>
     </a>
   </div>
   <div class="box">
     <a href="#" class="box-content">
       <strong>Box Title</strong>
       <span>Box Content</span>
     </a>
   </div>
   <div class="box">
     <a href="#" class="box-content">
       <strong>Box Title</strong>
       <span>Box Content</span>
     </a>
   </div>
 </div>

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  position: relative;
}

.box-wrap{
  width: 70vw;
  height: 60vh;
  display: grid;
  grid-column-gap: 0.3rem;
  grid-row-gap: 0.3rem;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.box {
  --x-px: calc(var(--x) * 1px);
  --y-px: calc(var(--y) * 1px);
  --border: 2px;
  background: rgba(255, 255, 255, 0.125);
  border-radius: 0.5rem;
  overflow: hidden;
}
.box:before, .box:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  inset: 0px;
  border-radius: inherit;
  background: radial-gradient(800px circle at var(--x-px) var(--y-px), rgba(249, 38, 114, 0.3), transparent 40%);
}
.box:before {
  z-index: 1;
}
.box:after {
  opacity: 0;
  z-index: 2;
  transition: opacity 0.4s ease;
}
.box:hover:after {
  opacity: 1;
}

.box-content {
  background: #131315;
  border-radius: inherit;
  color: white;
  text-decoration: none;
  z-index: 1;
  position: absolute;
  inset: var(--border);
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-row-gap: 0.5rem;
  padding: 0 1rem 0 2rem;
}
.box-content > strong {
  align-self: self-end;
  font-size: 125%;
}
.box-content > span {
  opacity: 0.7;
}

Javascript

console.clear();
const featuresEl = document.querySelector(".box-wrap");
const featureEls = document.querySelectorAll(".box");

featuresEl.addEventListener("pointermove", (ev) => {
  featureEls.forEach((featureEl) => {
    const rect = featureEl.getBoundingClientRect();
    featureEl.style.setProperty("--x", ev.clientX - rect.left);
    featureEl.style.setProperty("--y", ev.clientY - rect.top);
  });
});