X-Ray Text Hover Effect

Today we created a text hover effect. We turned it in a creative way and used cursor pointer animation on hover.

This looks like an x-ray magnifier effect while hovering over texts.

HTML Code:

<span class="fill">MOVE THE CIRCLE OVER THIS TEXT. MOVE THE CIRCLE OVER THIS TEXT. MOVE THE CIRCLE OVER THIS TEXT. MOVE THE CIRCLE OVER THIS TEXT. MOVE THE CIRCLE OVER THIS TEXT. MOVE THE CIRCLE OVER THIS TEXT. MOVE THE CIRCLE OVER THIS TEXT. MOVE THE CIRCLE OVER THIS TEXT. MOVE THE CIRCLE OVER THIS TEXT. MOVE THE CIRCLE OVER THIS TEXT. MOVE THE CIRCLE OVER THIS TEXT. MOVE THE CIRCLE OVER THIS TEXT. MOVE THE CIRCLE OVER THIS TEXT. MOVE THE CIRCLE OVER THIS TEXT. MOVE THE CIRCLE OVER THIS TEXT. MOVE THE CIRCLE OVER THIS TEXT. </span>
<span class="outline" aria-hidden="true">MOVE THE CIRCLE OVER THIS TEXT. MOVE THE CIRCLE OVER THIS TEXT. MOVE THE CIRCLE OVER THIS TEXT. MOVE THE CIRCLE OVER THIS TEXT. MOVE THE CIRCLE OVER THIS TEXT. MOVE THE CIRCLE OVER THIS TEXT. MOVE THE CIRCLE OVER THIS TEXT. MOVE THE CIRCLE OVER THIS TEXT. MOVE THE CIRCLE OVER THIS TEXT. MOVE THE CIRCLE OVER THIS TEXT. MOVE THE CIRCLE OVER THIS TEXT. MOVE THE CIRCLE OVER THIS TEXT. MOVE THE CIRCLE OVER THIS TEXT. MOVE THE CIRCLE OVER THIS TEXT. MOVE THE CIRCLE OVER THIS TEXT. MOVE THE CIRCLE OVER THIS TEXT. </span>

<div id="circle"></div>

CSS Code:

* {
  font-family: sans-serif;
  letter-spacing: -5px;
  cursor: grabbing;
  margin: 0;
  box-sizing: border-box;
  position: absolute;
}
* ::selection {
  background: none;
}

body {
  background: yellow;
  overflow: hidden;
}

span {
  width: 100vw;
  font-size: 5rem;
  font-weight: bold;
  line-height: 4rem;
  word-break: break-all;
  text-align: center;
}
span.fill {
  color: #000;
  z-index: 0;
}
span.outline {
  color: transparent;
  -webkit-text-stroke: 0.5px #000;
  z-index: 2;
}

#circle {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background: yellow;
  border: 15px solid #000;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
  top: calc(50vh - 100px);
  left: calc(50vw - 100px);
}

JavaScript Code:

const circle = document.getElementById("circle");
document.addEventListener("mousemove", (e) => {
  let mouse_x = e.clientX;
  let mouse_y = e.clientY;
  circle.style.left = `${mouse_x - 100}px`;
  circle.style.top = `${mouse_y - 100}px`;
});

Thank You!