Clipped Image Reveal on Hover

This content originally appeared on DEV Community and was authored by Stackfindover

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

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>

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 Video Output

Clipped Image Reveal on Hover Codepen Output:

We will update soon:)

This content originally appeared on DEV Community and was authored by Stackfindover

Print Share Comment Cite Upload Translate Updates

APA

Stackfindover | Sciencx (2021-04-21T15:38:37+00:00) Clipped Image Reveal on Hover. Retrieved from https://www.scien.cx/2021/04/21/clipped-image-reveal-on-hover/

MLA

" » Clipped Image Reveal on Hover." Stackfindover | Sciencx - Wednesday April 21, 2021, https://www.scien.cx/2021/04/21/clipped-image-reveal-on-hover/

HARVARD

Stackfindover | Sciencx Wednesday April 21, 2021 » Clipped Image Reveal on Hover., viewed ,<https://www.scien.cx/2021/04/21/clipped-image-reveal-on-hover/>

VANCOUVER

Stackfindover | Sciencx - » Clipped Image Reveal on Hover. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/21/clipped-image-reveal-on-hover/

CHICAGO

" » Clipped Image Reveal on Hover." Stackfindover | Sciencx - Accessed . https://www.scien.cx/2021/04/21/clipped-image-reveal-on-hover/

IEEE

" » Clipped Image Reveal on Hover." Stackfindover | Sciencx [Online]. Available: https://www.scien.cx/2021/04/21/clipped-image-reveal-on-hover/. [Accessed: ]

rf:citation

» Clipped Image Reveal on Hover | Stackfindover | Sciencx | https://www.scien.cx/2021/04/21/clipped-image-reveal-on-hover/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.