I came across the hover effect in the cover image at several sites, but just could not wrap my head around how to develop it. Thankfully after reading this blog, I finally got an idea on how to develop it.
Demo
Getting Started
Let's start coding!
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hover Effect</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="hover-container">
<img
src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=1953&q=80"
class="img"
/>
<div class="overlay"></div>
</div>
<script src="script.js"></script>
</body>
</html>
style.css
.hover-container {
height: max-content;
width: max-content;
position: relative;
margin: 12px 24px;
}
.img {
display: inline-block;
height: 200px;
}
.overlay,
.hover-container::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.hover-container::after {
content: "";
}
NOTE: Without the ::after pseudo-element hovering the hover-container would trigger .overlay:hover instead of .hover-container:hover
Now to the meat of the hover effect. We would be adding the effect to all elements with hover-container class. First the mouse position over the element will be tracked and the element would be styled accordingly (on mousemove)
script.js
document.querySelectorAll(".hover-container").forEach((container) => {
// reseting styles for the element when the mouse exits the element
container.onmouseleave = (e) => {
const overlayChild = e.target.querySelector(".overlay");
e.target.style.transform = "rotateY(0) rotateX(0)";
overlayChild.style.background = "transparent";
};
// adding a listener to style the element when the mouse moves inside the element
container.addEventListener("mousemove", (e) => {
const rect = e.target.getBoundingClientRect();
const x = e.clientX - rect.left; //x position within the element.
const y = e.clientY - rect.top; //y position within the element.
const width = e.target.offsetWidth;
const height = e.target.offsetHeight;
const overlayChild = e.target.querySelector(".overlay");
// the values can be tweaked as per personal requirements
e.target.style.transform = `rotateY(${-(0.5 - x / width) * 30
}deg) rotateX(${(y / height - 0.5) * 30}deg)`;
overlayChild.style.background = `radial-gradient(
circle at ${x}px ${y}px,
rgba(255, 255, 255, 0.2),
rgba(0, 0, 0, 0.2)
)`;
});
})
Reference
Thanks for reading
Need a Top Rated Software Development Freelancer to chop away your development woes? Contact me on Upwork
Want to see what I am working on? Check out my Personal Website and GitHub
Want to connect? Reach out to me on LinkedIn
Follow my blogs for bi-weekly new Tidbits on Medium
FAQ
These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.
-
I am a beginner, how should I learn Front-End Web Dev?
Look into the following articles: Would you mentor me?
Sorry, I am already under a lot of workload and would not have the time to mentor anyone.
Top comments (0)