Pure CSS Directional Hover Effect for Grouped Elements

Add to your RSS feed31 October 20244 min read

Key Features

Steps to Create the Effect

Explanation

1. General Styles

2. Navigation List and Items

3. Links and Hover Styles

4. Pill Background Element

5. Hover Effect for the Pill Background

6. Directional Hover Effect

In this step-by-step guide, you'll learn how to add a Directional Hover Effect to grouped HTML elements, creating a smooth and engaging interaction as users hover over each item. This effect uses pure CSS to detect the cursor's entry direction and animates accordingly, adding visual interest to your design. Let's dive in and build it from scratch!

Key Features

Direction-Aware Animation: The animation adapts depending on the direction of cursor entry or exit.
Smooth Transitions: Background or overlay effect slides in and out from the edge closest to the cursor, creating a natural, flowing animation.
Pure CSS Implementation: No JavaScript required, making it a lightweight solution.

Steps to Create the Effect

1. HTML Structure: Start with a simple HTML layout of grouped elements.

html

1 <!DOCTYPE html>
2 <html lang="en">
3 	<head>
4 		<meta charset="UTF-8" />
5 		<meta
6 			name="viewport"
7 			content="width=device-width, initial-scale=1.0" />
8 		<title>Document</title>
9 		<link
10 			rel="stylesheet"
11 			href="style.css" />
12 	</head>
13 	<body>
14 		<nav>
15 			<ul
16 				class="nav"
17 				aria-label="Navigation">
18 				<li class="nav__item">
19 					<span
20 						class="nav__item-pill"
21 						aria-hidden="true"></span>
22 					<a
23 						href="#!"
24 						class="nav__item-link"
25 						>Categories</a
26 					>
27 				</li>
28 				<li class="nav__item">
29 					<span
30 						class="nav__item-pill"
31 						aria-hidden="true"></span>
32 					<a
33 						href="#!"
34 						class="nav__item-link"
35 						>Howtos</a
36 					>
37 				</li>
38 				<li class="nav__item">
39 					<span
40 						class="nav__item-pill"
41 						aria-hidden="true"></span>
42 					<a
43 						href="#!"
44 						class="nav__item-link"
45 						>Snippets</a
46 					>
47 				</li>
48 				<li class="nav__item">
49 					<span
50 						class="nav__item-pill"
51 						aria-hidden="true"></span>
52 					<a
53 						href="#!"
54 						class="nav__item-link"
55 						>Friday</a
56 					>
57 				</li>
58 			</ul>
59 		</nav>
60 	</body>
61 </html>

2. CSS Styling: Style the list and elements to achieve a uniform look and set the foundation for the directional effect.

css

1 .nav {
2 	display: flex;
3 	justify-content: center;
4 }
5 .nav__list {
6 	list-style: none;
7 	display: flex;
8 }
9 
10 .nav__item {
11 	position: relative;
12 	display: inline-flex;
13 	padding: 1rem 2rem;
14 	font-size: 0.875rem;
15 	color: inherit;
16 }
17 
18 .nav__item-link {
19 	position: relative;
20 	text-decoration: none;
21 	color: black;
22 }
23 
24 .nav__item-pill {
25 	position: absolute;
26 	inset: 0;
27 	overflow: hidden;
28 }
29 
30 .nav__item-pill::before {
31 	content: '';
32 	position: absolute;
33 	inset: 0;
34 	background-color: #f1f5f9;
35 	border-radius: 0.25rem;
36 	opacity: 0;
37 	visibility: hidden;
38 	transition-property: visibility, opacity, transform;
39 	transition-duration: 0.3s;
40 }

3. Directional Hover Effect: Use CSS ::before pseudo-element to create the sliding background effect. The transform property controls the entry direction.

css

1 .nav__item:hover > .nav__item-pill::before {
2 	opacity: 1;
3 	visibility: visible;
4 }
5 .nav__item:hover > .nav__item-link {
6 	color: #0f172a;
7 }
8 .nav__item:has(~ .nav__item:hover) > .nav__item-pill::before {
9 	opacity: 1;
10 	transform: translateX(100%);
11 }
12 
13 .nav__item:hover ~ .nav__item > .nav__item-pill::before {
14 	opacity: 1;
15 	transform: translateX(-100%);
16 }
17 .nav__item:has(~ .nav__item + .nav__item:hover) > .nav__item-pill::before {
18 	transition: none;
19 }
20 
21 .nav__item:hover + .nav__item ~ .nav__item > .nav__item-pill::before {
22 	transition: none;
23 }

Explanation

Pseudo-Elements: ::before acts as a background overlay that slides based on the cursor direction.
Transform Transitions: Adjusting transform: translate on hover allows the effect to slide in from the nearest edge.

This CSS code applies a directional hover effect to a navigation bar, with a "pill" background that smoothly moves behind each item in the navbar as the user hovers over them. Here’s a breakdown of how each part works:

1. General Styles

css

1 body {
2     font-family: sans-serif;
3 }
4 
5 .nav {
6     display: flex;
7     justify-content: center;
8 }

Sets a sans-serif font for the page.
The .nav class centers the navigation items horizontally.

css

1 .nav__list {
2     list-style: none;
3     display: flex;
4 }
5 
6 .nav__item {
7     position: relative;
8     display: inline-flex;
9     padding: 1rem 2rem;
10     font-size: 0.875rem;
11     color: inherit;
12 }

.nav__list removes the default list style and arranges items in a row.
.nav__item centers each item, adds padding, and positions it relative so child elements can be positioned absolutely.

3. Links and Hover Styles

css

1 .nav__item-link {
2     position: relative;
3     text-decoration: none;
4     color: black;
5 }

The links (.nav__item-link) are set to have no text decoration and inherit a black color by default.

4. Pill Background Element

css

1 .nav__item-pill {
2     position: absolute;
3     inset: 0;
4     overflow: hidden;
5 }
6 
7 .nav__item-pill::before {
8     content: '';
9     position: absolute;
10     inset: 0;
11     background-color: #f1f5f9;
12     border-radius: 0.25rem;
13     opacity: 0;
14     visibility: hidden;
15     transition-property: visibility, opacity, transform;
16     transition-duration: 0.3s;
17 }

.nav__item-pill is a container for the animated background "pill" and is positioned to cover the link area entirely.
.nav__item-pill::before applies a pill-shaped background with opacity, visibility, and transform properties, allowing for smooth transitions on hover.

5. Hover Effect for the Pill Background

css

1 .nav__item:hover > .nav__item-pill::before {
2     opacity: 1;
3     visibility: visible;
4 }
5 
6 .nav__item:hover > .nav__item-link {
7     color: #0f172a;
8 }

When hovering over .nav__item, the ::before background fades in, making the pill background visible.
The link text color changes to a dark shade on hover.

6. Directional Hover Effect

css

1 .nav__item:has(~ .nav__item:hover) > .nav__item-pill::before {
2     opacity: 1;
3     transform: translateX(100%);
4 }
5 
6 .nav__item:hover ~ .nav__item > .nav__item-pill::before {
7     opacity: 1;
8     transform: translateX(-100%);
9 }

The transform: translateX() moves the pill left or right when hovering over a different link.
.nav__item:has(~ .nav__item + .nav__item:hover) > .nav__item-pill::before { transition: none; } optimizes the transition to avoid visual artifacts when hovering quickly.

In summary, this code creates a smooth directional hover effect, making the background "pill" appear to follow the mouse across links by transitioning between the elements.

With this CSS-only approach, you can create a fluid and dynamic directional hover effect that enhances the interactivity of grouped elements without the need for JavaScript.

css

pure-css

hover

Pure CSS Directional Hover Effect for Grouped Elements

Table of Contents

Key Features

Steps to Create the Effect

Explanation

1. General Styles

2. Navigation List and Items

3. Links and Hover Styles

4. Pill Background Element

5. Hover Effect for the Pill Background

6. Directional Hover Effect

Related Posts:

10 CSS Tips You Must Know About in 2024

11 Crazy Inspiring CSS Artists You Need to Know