<head>
    <meta charset="UTF-8" />
    <title>Clipped Image Reveal on Hover</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <a href="#" class="link">Instagram</a>
      <span class="hover-container">
        <span class="link-text">Instagram</span>
        <span class="image-container">
          <span class="image-inner">
            <img src="https://www.flaticon.com/svg/vstatic/svg/87/87390.svg?token=exp=1619453524~hmac=d6d88887d5ea43429e24dec74b75f78a" alt="instagram-logo" class="image-link">
          </span>
        </span>
      </span>
    </div>
  </body>
* {
    padding: 0;
    margin: 0;
    font-family: 'IBM Plex Sans', sans-serif;
}

body {
    font-size: 1em;
    background: #f2f4f6;
    overflow: hidden;
}
img.image-link {
    display: block;
}
.container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
}
a {
    text-decoration: unset;
}
.link {
    z-index: 1;
    position: relative;
    display: inline-block;
    font-size: 10vw;
    color: #808080;
    text-transform: uppercase;
}
.link:hover {
    color: #333;
}
.image-container {
    z-index: -2;
    position: absolute;
    left: 0;
    top: 0;
    width: 150px;
    height: 150px;
    opacity: 0;
    transition: opacity 250ms ease;
}
.link-text {
    z-index: 2;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 10vw;
    text-transform: uppercase;
    color: #fff;
    pointer-events: none;
    opacity: 0;
    transition: opacity 250ms ease;
    clip-path: circle(75px at var(--x) var(--y) );
    -webkit-clip-path: circle(75px at var(--x) var(--y) );
}
.image-inner {
    position: absolute;
    top: -75px;
    left: -75px;
    width: 150px;
    height: 150px;
}
.image-link {
    display: block;
    max-width: 100%;
    width: 150px;
    height: 150px;
    object-fit: cover;
    filter: brightness(0.9);
}

.link:hover ~ .hover-container .image-container, 
.link:hover ~ .hover-container .link-text {
    opacity: 1;
}
const linkText = document.querySelector('.link-text');
      const linkImage = document.querySelector('.image-link');

      function showContent(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', showContent);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.