Advanced Hover Effect to WOW your visitors!
Tags: css, html, ux, webdev
Published: 2021-05-02 04:26:45

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](https://dev.to/jashgopani/windows-10-button-hover-effect-using-css-and-vanilla-js-1io4), I finally got an idea on how to develop it.

# Demo

{% codepen https://codepen.io/ruppysuppy/pen/GRrbyXa %}

# Getting Started

Let's start coding!

`index.html`

```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`

```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`

```javascript
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)
	    )`;
    });
})
```

Finding **personal finance** too intimidating? Checkout my **Instagram** to become a [**Dollar Ninja**](https://www.instagram.com/the.dollar.ninja/)

# Reference

1. [Windows 10 button hover effect](https://dev.to/jashgopani/windows-10-button-hover-effect-using-css-and-vanilla-js-1io4)

# Thanks for reading

Reach out to me on

-   [GitHub](https://github.com/ruppysuppy)
-   [LinkedIn](https://www.linkedin.com/in/tapajyoti-bose-429a601a0)
-   [Portfolio](https://tapajyoti-bose.vercel.app) (For freelance projects, reach out through the contact form)