DEV Community

loading...
Cover image for Advanced Hover Effect to WOW your visitors!

Advanced Hover Effect to WOW your visitors!

ruppysuppy profile image Tapajyoti Bose ・2 min read

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>
Enter fullscreen mode Exit fullscreen mode

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: "";
}
Enter fullscreen mode Exit fullscreen mode

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)
        )`;
    });
})
Enter fullscreen mode Exit fullscreen mode

Reference

  1. Windows 10 button hover effect

Thanks for reading

Reach out to me on

Discussion (0)

Forem Open with the Forem app