Clipped Image Reveal on Hover

April 20, 2021

Rahul

Hello, guys In this tutorial we will try to solve the mentioned query. and also we will learn Clipped Image Reveal on Hover Using HTML CSS & JS.

Common Query

How to create image reveal on hover
How to create clipped image reveal on hover

See Also :- Animated Like Button with HTML CSS & JS

Clipped Image Reveal on Hover Step By Step

First, we need to create two files index.html and style.css then we need to do code for it.

Step:#1

Add below code inside index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Clipped Image Reveal on Hover</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta https-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="instagram-logo.png" alt="instagram-logo" class="image-link">
          </span>
        </span>
      </span>
    </div>

    <script>
      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);
    </script>
  </body>
</html>

Step:#2

Then we need to add code for style.css which code I provide in the below screen.

* {
    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;
}

Clipped Image Reveal on Hover Output: Watch Now

We hope you liked this article. You should definitely keep your thoughts about it in the comment below and share this article with your friends.

Leave a Comment Cancel reply