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!
whoah this weblog is wonderful i love reading your articles.
Keep up the great work! You recognize, lots of persons are looking round for this information, you can aid them greatly.
Thanks for interacting with us.
we appreciate your getting in touch????.
Hi, this is Jeniffer. your coding skills look fantastic!
hey i really can say that its nice to watch this hovering effect.
Дискуссии о секса это првильно и говорить о нем нужно, но очень много людей стесняються говорить о нем, но на помощь приходят такие блоги как “intimblogx.ru”.