X-Ray Text Hover Effect

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post
Airplane Scroll Trigger Animation

AirPlane Scroll Animation

Next Post
150ml of Vanilla CSS

150ml of Vanilla CSS

Related Posts
Total
0
Share