Clipped Image Reveal on Hover
Tags: html, css, javascript, beginners
Published: 2021-04-21 15:38:37

***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:-** <a href="http://blogs.stackfindover.com/animated-like-button-with-html-css-js/">Animated Like Button with HTML CSS & JS</a>

###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**
```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>
```
###Step:#2###
Then we need to add code for style.css which code I provide in the below screen.

```css
* {
    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 Video Output###
{% youtube f2iS-YL7WL0 %}

###Clipped Image Reveal on Hover Codepen Output:###
{% codepen https://codepen.io/stack-findover/pen/GRreEeV %}