AI CSS Animations

CSS Navbar & Menu Hover Effects

29 CSS hover effects for navigation bars, menus and lists: sliding indicators, underline trackers, dropdowns, docks and list highlights.

Sliding Pill Nav Hover Effect

One pill slides between the items of a dark floating navbar to whichever you hover, then glides back to the current page. Pure CSS with :has() and equal-width grid columns.

menu · fill · shadow

Directional Underline Nav Hover Effect

Move across the menu and the old underline retracts toward the new item while the new one grows from that side. Sibling selectors set transform-origin, a delayed transition holds it.

menu · underline

Dot Indicator Nav Hover Effect

Menu items float up a little on hover and a dot pops in underneath with a bounce, the same dot that marks the current page. The dot counter-moves so it stays on the baseline.

menu · minimal · playful · tailwind

Vertical Nav Indicator Hover Effect

A vertical menu on a faint rail: hovering an item springs an accent bar onto the rail and washes a soft tint in from the left. Suits docs sidebars and settings pages.

menu · border · fill

Strikethrough Nav Hover Effect

Point at one item and every other one gets crossed out with a quick slanted pen stroke, one after another. An editorial take on sibling dimming, built on :has() and :not().

menu · text · playful

Skewed Background Nav Hover Effect

A slanted block of color sweeps in from the left behind the hovered item and leaves out the right, so running along the menu feels like one bar passing through.

menu · fill · playful

Gliding Underline Nav Hover Effect

An underline glides under whichever item you hover, trailed by a slower faint echo, then settles back under the current page. Two pseudo-elements share one :has() driven offset.

menu · underline

Icon Pop Nav Hover Effect

A text-only menu where hovering an item pops its icon up above the label with a springy bounce. Each icon is an inline SVG parked at scale zero, so the labels never shift.

menu · icon · playful

Pagination Hover Effect

Page numbers where hovering draws a ring around the number clockwise and the arrows nudge outward. The ring is a conic mask whose angle is a registered @property, so it transitions.

menu · border · minimal

Arrow Breadcrumb Hover Effect

Chevron-shaped breadcrumb steps that nest into each other; hovering one floods it with color from the left while the current page stays solid. Each step is a clip-path polygon.

menu · fill

Sticker Nav Hover Effect

Hovered menu items slap on like stickers: they tilt, grow and fill with color over a hard offset shadow, leaning left and right in turn. A springy transform does the slap.

menu · playful · shadow · tailwind

Swinging Tag Nav Hover Effect

Menu items hang like shop tags on strings from a rail and swing on hover, settling in a damped pendulum. The pivot is a transform-origin above the tag, at the top of its string.

menu · playful

Hamburger Menu to X Hover

Three bars that slide together and then cross into an X, while the middle bar shrinks away. Separate translate and rotate transitions run in sequence, reversed on the way back.

icon · menu · minimal

Blur Others Text Hover Effect

A stack of big words where pointing at one blurs and dims the rest. The :has() selector reacts only when a word is hovered, so the gaps between words never dim the list.

text · menu · minimal

macOS Dock Hover Effect

App icons in a glass dock that magnify under the pointer while their neighbors grow less and step aside. Pure CSS: sibling selectors for the right side, :has() for the left.

menu · icon · glass · playful

Radial Menu Hover Effect

A round button that swirls six actions out into a ring around itself on hover. Each item is rotated, pushed out and rotated back, so the icons stay upright while they spiral into place.

menu · button · icon · playful

Dropdown Menu on Hover

A pure CSS dropdown that unfolds under its trigger on hover or keyboard focus, with each item dropping in a beat after the last. The panel stays clickable thanks to an invisible hover bridge.

menu · reveal · shadow

Date Range Picker Hover

A calendar with a start date picked: hovering a later day previews the whole range, with a tinted band that runs from the start circle to the day under the pointer. Built with ~ and :has().

menu · fill · minimal

Table Row Hover Effect

Hovering a cell tints its row, marks the row with an accent bar and faintly tints its column too. The row uses an inset shadow and the column a background, so the crossing cell stacks both.

menu · fill · minimal

Video Chapter Scrubber Hover

A video player whose progress bar is split into chapters: hovering one thickens it and pops its title and timestamp above. Each chapter's width is a flex-grow value set inline.

menu · overlay · reveal

Playlist Row Hover Effect

A track list in the Spotify style: hovering a row tints it, rolls the track number up into a play button and fades in a like button. The number and the icon share one grid cell.

menu · icon · reveal · tailwind

Slide In List Hover Effect

Menu rows fill with the accent from the left while the label nudges over and an arrow slides in. The fill leaves to the right, because its transform origin flips on hover.

menu · fill · reveal

Context Menu Submenu Hover

A right-click style menu with shortcuts, where hovering Share slides a submenu out beside it. The submenu keeps a small hover bridge over the gap, so moving diagonally into it works.

menu · reveal · shadow

Side Tooltip Hover Effect

A vertical toolbar whose labels unroll to the right of each icon on hover. The label is wiped in with clip-path from the icon's edge, so it reads as coming out of the button.

menu · icon · reveal

Progress Stepper Hover Effect

A checkout stepper where hovering a later step previews the progress line reaching it, in a lighter tint than the real progress. A clip-path inset on the line is set per step with :has().

menu · fill · minimal

Collapsed Breadcrumb Hover

A long breadcrumb folded into an ellipsis that unfolds into the hidden levels on hover or focus. Two one-column grids animate 1fr to 0fr and back, so no width is hard-coded.

link · menu · reveal

Bar Chart Hover Tooltip

A small weekly bar chart where the hovered bar turns solid and a value label pops out of its top. Each bar's height is one --h value, which also places the label.

menu · fill · reveal

File Row Hover Actions

A file list where hovering a row swaps its size for a set of action buttons that slide in one after another. The actions overlay the size column, so the row never changes width.

menu · icon · reveal · tailwind

FAQ Accordion Hover Preview

FAQ rows that peek open on hover to show the first line of the answer, with the chevron nudging down. The row animates grid-template-rows from 0fr to 1fr, so the height is never hard-coded.

menu · reveal · minimal

How to use these menu hover effects

Open any effect, copy the HTML into your markup and the CSS into your stylesheet. Nothing else is required: no JavaScript, no libraries. Classes are prefixed per effect so several can share a page.

To change the color, set --hfx-color on the element or any ancestor. To change the size, set --hfx-size: every dimension inside is in em, so padding, radii and offsets scale together.

Every snippet ships with a prefers-reduced-motion rule that disables the movement for people who asked their OS for less of it. The hover state still applies, only the transition is skipped.