<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="https://assets.codepen.io/1159990/tokyo-tower.jpg" alt="Tokyo Tower" />
      </span>
    </span>
  </span>
</div>

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@900&display=swap');

$black: #333;
$gray: #808080;
$white: #fff;
$bg: #f2f0ed;

* {
  box-sizing: border-box;
  &::before, &::after {
    box-sizing: border-box;
  }
}

body {
  font-family: 'Work Sans', sans-serif;
  font-size: 1em;
  margin: 0;
  background: $bg;
  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: $gray;
  text-transform: uppercase;
  transition: color 275ms ease;
  &:hover {
    color: $black;
    ~ .hover-container {
      .link-text {
        opacity: 1;
      }
      .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: $white;
  text-transform: uppercase;
  pointer-events: none;
  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;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  filter: brightness(0.9);
}

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);