DEV Community

Cover image for Advanced Hover Effect to WOW your visitors!
Tapajyoti Bose
Tapajyoti Bose

Posted on • Updated on


Advanced Hover Effect to WOW your visitors!

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.


Getting Started

Let's start coding!


<!DOCTYPE html>
<html lang="en">
        <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" />
        <div class="hover-container">
            <div class="overlay"></div>
        <script src="script.js"></script>
Enter fullscreen mode Exit fullscreen mode


.hover-container {
    height: max-content;
    width: max-content;
    position: relative;
    margin: 12px 24px;

.img {
    display: inline-block;
    height: 200px;

.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)


document.querySelectorAll(".hover-container").forEach((container) => {
    // reseting styles for the element when the mouse exits the element
    container.onmouseleave = (e) => {
        const overlayChild =".overlay"); = "rotateY(0) rotateX(0)"; = "transparent";

    // adding a listener to style the element when the mouse moves inside the element
    container.addEventListener("mousemove", (e) => {
        const rect =;
        const x = e.clientX - rect.left; //x position within the element.
        const y = e.clientY -; //y position within the element.
        const width =;
        const height =;

        const overlayChild =".overlay");

        // the values can be tweaked as per personal requirements = `rotateY(${-(0.5 - x / width) * 30
            }deg) rotateX(${(y / height - 0.5) * 30}deg)`; = `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

Research says, writing down your goals on pen & paper makes you 21% to 39% more likely to achieve them. Check out these notebooks and journals to make the journey of achieving your dreams easier:


  1. Windows 10 button hover effect

Thanks for reading

Reach out to me on

Top comments (0)

The most important JavaScript discussions happen on DEV

React vs Signals: 10 Years Later

React vs Signals: A Look Back

☝️ Ryan Carniato and Dan Abramov take a look back at React!