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 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:
Top comments (0)