If the titles you use on your websites contain concepts that can be reversed, you can use this code to effect your text. In this code, the text is in normal color. By placing the mouse on the text, a part of the image is displayed in the background of the text. The image is displayed around the mouse in a circle.
HTML
<!-- This script got from www.devanswer.com -->
<div class="container">
<a class="link" href="#">Tokyo Tower</a>
<span class="hover-container">
<span class="link-text" aria-hidden="true">Tokyo Tower</span>
<span class="image-container">
<span class="image-inner">
<img class="link-image" src="http://www.devanswer.com/img/tokyo-tower.jpg" alt="Tokyo Tower" />
</span>
</span>
</span>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@900&display=swap");
* {
box-sizing: border-box;
}
*::before, *::after {
box-sizing: border-box;
}
body {
font-family: "Work Sans", sans-serif;
font-size: 1em;
margin: 0;
background: #f2f0ed;
overflow: hidden;
}
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 100vh;
}
a {
text-decoration: none;
}
.link {
z-index: 1;
position: relative;
display: inline-block;
font-size: 3em;
color: #808080;
text-transform: uppercase;
transition: color 275ms ease;
}
.link:hover {
color: #333;
}
.link:hover~.hover-container .link-text {
opacity: 1;
}
.link:hover~.hover-container .image-container {
opacity: 1;
}
.link-text {
z-index: 2;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-size: 3em;
color: #fff;
text-transform: uppercase;
pointer-events: none;
-webkit-clip-path: circle(75px at var(--x) var(--y));
clip-path: circle(75px at var(--x) var(--y));
opacity: 0;
transition: opacity 250ms ease;
}
.image-container {
z-index: -2;
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
opacity: 0;
transition: opacity 250ms ease;
}
.image-inner {
position: absolute;
top: -75px;
left: -75px;
width: 150px;
height: 150px;
}
.link-image {
display: block;
max-width: 100%;
width: 150px;
height: 150px;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
border-radius: 50%;
filter: brightness(0.9);
}Javascript
const linkText = document.querySelector('.link-text');
const linkImage = document.querySelector('.link-image');
function showImgContent(e) {
x = e.clientX;
y = e.clientY;
linkImage.style.transform = `translate3d(${x}px, ${y}px, 0)`;
linkText.style.setProperty('--x',(x)+'px');
linkText.style.setProperty('--y',(y)+'px');
}
document.addEventListener('mousemove', showImgContent);
