X-Ray Text Hover Effect

This looks like an x-ray magnifier effect while hovering over texts.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!

Share your love
Default image
Coding Hindi
Articles: 38

5 Comments

Leave a Reply

Your email address will not be published.

I'm not a robot *Captcha loading...

  1. Дискуссии о секса это првильно и говорить о нем нужно, но очень много людей стесняються говорить о нем, но на помощь приходят такие блоги как “intimblogx.ru”.

10 Best Chrome Extensions for Developers in 2022. 10 Best Free C Programming Courses to Take in 2022 9 Most Useful Tools For Instagram Growth.[2022] What is an operating system ? How to Make Money Online from Instagram in India?