Clipped Image Reveal on Hover (2024)

Clipped Image Reveal On Hover

Here, we create a clipped image reveal on hover HTML, CSS and JS.

Project Folder Structure

Before we start coding we take a look at the project folder structure. We start by creating a folder called – “clipped image reveal on hover” Inside this folder, we have 3 files. Create these files like below:

index.html
style.css
script.js

HTML

We create clipped image reveal on hover HTML code. Copy the code below and paste it into your index.html file.

				
					<div class="container">
  <a class="link" href="#">This is India</a>
  <span class="hover-container">
    <span class="link-text" aria-hidden="true">This is India</span>
    <span class="image-container">
      <span class="image-inner">
        <img decoding="async" class="link-image" src="https://codewarrier.com/wp-content/uploads/2024/04/Flag_of_India.png" alt="India flag" />
      </span>
    </span>
  </span>
</div>

CSS

We create clipped image reveal on hover CSS code. Copy the code below and paste it into your style.css file.

				
					@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@900&display=swap');
 * {
	 box-sizing: border-box;
}
 *::before, *::after {
	 box-sizing: border-box;
}
 body {
	 font-family: 'Work Sans', sans-serif;
	 font-size: 1em;
	 margin: 0;
	 background: #f2f0ed;
	 overflow: hidden;
}
 .container {
	 position: relative;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 width: 100%;
	 min-height: 100vh;
}
 a {
	 text-decoration: none;
}
 .link {
	 z-index: 1;
	 position: relative;
	 display: inline-block;
	 font-size: 3em;
	 color: #808080;
	 text-transform: uppercase;
	 transition: color 275ms ease;
}
 .link:hover {
	 color: #333;
}
 .link:hover ~ .hover-container .link-text {
	 opacity: 1;
}
 .link:hover ~ .hover-container .image-container {
	 opacity: 1;
}
 .link-text {
	 z-index: 2;
	 position: absolute;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 top: 0;
	 left: 0;
	 right: 0;
	 bottom: 0;
	 font-size: 3em;
	 color: #fff;
	 text-transform: uppercase;
	 pointer-events: none;
	 clip-path: circle(75px at var(--x) var(--y));
	 opacity: 0;
	 transition: opacity 250ms ease;
}
 .image-container {
	 z-index: -2;
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 150px;
	 height: 150px;
	 opacity: 0;
	 transition: opacity 250ms ease;
}
 .image-inner {
	 position: absolute;
	 top: -75px;
	 left: -75px;
	 width: 150px;
	 height: 150px;
}
 .link-image {
	 display: block;
	 max-width: 100%;
	 width: 150px;
	 height: 150px;
	 object-fit: cover;
	 object-position: center;
	 border-radius: 50%;
	 filter: brightness(0.9);
}

JS

Finally, we add functionality in clipped image reveal on hover using JavaScript. Copy the code below and paste it into your script.js file.

				
					const linkText = document.querySelector('.link-text');
const linkImage = document.querySelector('.link-image');

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

CODEPEN

Click Here

Watch Some Other Topics

Home

Clipped Image Reveal on Hover (2024)