DEV Community

Cover image for Clipped Image Reveal on Hover
Stackfindover
Stackfindover

Posted on • Updated on

Clipped Image Reveal on Hover

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

  1. How to create image reveal on hover
  2. 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 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="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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Clipped Image Reveal on Hover Video Output

Clipped Image Reveal on Hover Codepen Output:

Top comments (0)