hover CSS Effects — 3025 Free Examples (Page 24)

Live preview Navigation

Curtain Fall Reveal Nav

Nav links revealed as a curtain falls downward on hover.

#hover #gradient #transform

Live preview Navigation

Curtain Rise Reveal Nav

Nav links revealed as a curtain rises upward on hover.

#hover #gradient #transform

Live preview Navigation

Dark Blur Navbar

Dark themed navbar with frosted blur background.

#hover #shadow #border

Live preview Navigation

3D Dot Nav

3D extruded dot navigation.

#hover #gradient #transform

Live preview Navigation

Circle Dot Nav

Dot navigation in a circle container.

#hover #gradient #transform

Live preview Navigation

Floating Bottom Dot Nav

Floating dot navigation at bottom.

#hover #gradient #transform

Live preview Navigation

Floating Left Dot Nav

Floating dot navigation on left with shadow.

#hover #transform #shadow

Live preview Navigation

Floating Right Dot Nav

Floating dot navigation with shadow.

#hover #gradient #transform

Live preview Navigation

Floating Top Dot Nav

Floating dot navigation at top.

#hover #transform #shadow

Live preview Navigation

Glow Dot Nav

Dot nav with glowing active dot.

#hover #shadow #border

Live preview Navigation

Gradient Dot Nav

Dot nav with gradient active dot.

#hover #gradient #transform

Live preview Navigation

Neon Dot Nav

Neon themed dot navigation.

#hover #shadow #border

Live preview Navigation

Square Dot Nav

Dot nav with square-shaped dots.

#hover #shadow #border

Live preview Navigation

Vertical Left Dot Nav

Vertical dot navigation fixed to left side.

#hover #transform #shadow

Live preview Navigation

Vertical Right Dot Nav

Vertical dot navigation fixed to right side.

#hover #transform #shadow

Live preview Navigation

3D Perspective Drawer Navbar

Drawer with a 3D perspective active link lifting forward.

#hover #transform #shadow

Live preview Navigation

Brutalist Block Drawer Navbar

Drawer with raw brutalist block styling, sharp borders, and offset shadow.

#hover #transform #shadow

Live preview Navigation

Cascading Multi Drawer Navbar

Multi-level cascading drawer with progressively indented levels.

#hover #border

Live preview Navigation

Collapsible Arrow Drawer Navbar

Drawer with collapsible sections toggled by an arrow indicator.

#hover #transform

Live preview Navigation

Dark Panel Drawer Navbar

Dark panel drawer with subtle border accents.

#hover #border

Live preview Navigation

Floating Overlay Drawer Navbar

Floating drawer that overlays content without pushing it.

#hover #animation #transform

Live preview Navigation

Glow Edge Drawer Navbar

Drawer with a glowing active edge in indigo neon.

#hover #transform #shadow

Live preview Navigation

Nested Accordion Drawer Navbar

Accordion drawer with expandable sections revealing sub-links.

#hover #transform

Live preview Navigation

Neumorphic Panel Drawer Navbar

Drawer with soft neumorphic embossed styling.

#hover #shadow #border

Live preview Navigation

Blur Overlay Drawer Navbar

Drawer over a frosted blurred backdrop.

#hover #animation #gradient

Live preview Navigation

Dim Overlay Drawer Navbar

Drawer over a dimmed dark overlay backdrop.

#hover #animation #transform

Live preview Navigation

Pin Sticky Drawer Navbar

Drawer with a pinned sticky header that stays at the top.

#hover #shadow

Live preview Navigation

Pinned Side Drawer Navbar

Pinned left-side drawer that persists beside the main content.

#hover #shadow #border

Live preview Navigation

3D Left Drawer Navbar

Left drawer with 3D perspective slide revealing main nav beside it.

#hover #animation #gradient

Live preview Navigation

3D Right Drawer Navbar

Right drawer with 3D perspective slide.

#hover #animation #gradient

Live preview Navigation

Square Sharp Drawer Navbar

Drawer with sharp square corners and bold contrast.

#hover #transform #border

Live preview Navigation

Fading Dropdown Menu

The submenu drops a few pixels and fades in, staying open while the pointer is inside.

#hover #transform #shadow

Live preview Navigation

3D Flip Card Navbar

Each link is a 3D flip card revealing a back face on hover.

#hover #transform #3d

Live preview Navigation

Horizontal Flip Navbar

Links flip horizontally (Y-axis) on hover for a side reveal.

#hover #transform #3d

Live preview Navigation

Vertical Flip Navbar

Links flip vertically (X-axis) on hover for a top-down reveal.

#hover #transform #3d

Live preview Navigation

Floating Action Navbar

Navbar with floating action-style buttons.

#hover #gradient #transform

Live preview Navigation

Floating Glass Navbar

Detached floating glass navbar with strong blur.

#hover #shadow #border

Live preview Navigation

Floating Pill Navbar

Floating rounded pill navbar with a sliding active indicator.

#hover #shadow

Live preview Navigation

Frosted Edge Navbar

Frosted navbar with crystal edge highlight.

#hover #shadow #border

Live preview Navigation

Glassmorphism Navbar

Frosted glass navbar with backdrop blur and translucent background.

#hover #shadow #border

Live preview Navigation

Glow Pulse Navbar

Navbar with pulsing glow around active link.

#hover #animation #shadow

Live preview Navigation

Gradient Border Navbar

Navbar with animated gradient border around active link.

#hover #animation #gradient

Live preview Navigation

Has-Selector Active Nav

Selecting a radio marks the item active and shifts the whole bar accent with :has().

#hover #shadow #border

Live preview Navigation

Holographic Navbar

Navbar with holographic gradient overlay.

#hover #animation #gradient

Live preview Navigation

Circle Icon Nav

Icon nav with circular icons.

#hover #gradient #transform

Live preview Navigation

Floating Icon Nav

Floating icon navigation with shadow.

#hover #gradient #transform

Live preview Navigation

Glow Icon Nav

Icon nav with glowing active icon.

#hover #shadow #border

Live preview Navigation

Gradient Icon Nav

Icon nav with animated gradient background.

#hover #animation #gradient

Live preview Navigation

Horizontal Icon Nav

Horizontal icon-only navigation.

#hover #gradient #shadow

Live preview Navigation

Neon Icon Nav

Neon themed icon navigation.

#hover #shadow #border

Live preview Navigation

Vertical Icon Nav

Vertical icon navigation.

#hover #gradient #shadow

Live preview Navigation

Iris Aperture Spin Nav

Iris aperture blades that spin open like a camera shutter on hover.

#hover #transform

Live preview Navigation

Iris Aperture Zoom Nav

Iris aperture that zooms open to reveal nav links in the center.

#hover #gradient #transform

Live preview Navigation

Lift Soar Navbar

Links lift and soar upward with strong shadow projection.

#hover #transform #shadow

Live preview Navigation

Light Blur Navbar

Light navbar with translucent blur and soft glow.

#hover #gradient #shadow

Live preview Navigation

Light Clean Navbar

Clean white navbar with soft shadow and pill active state.

#hover #shadow

Live preview Navigation

Mega Shadow Navbar

Navbar with multiple layered shadows for depth.

#hover #shadow

Live preview Navigation

Accordion Menu

Accordion menu with expandable sections.

#hover #transform

Live preview Navigation

Hover Dropdown Menu

Dropdown menu revealed on hover.

#hover #transform #shadow

Live preview Navigation

Fade In Menu

Menu that fades in on toggle.

#hover #shadow

Live preview Navigation

Flyout Menu

Menu with flyout submenu on hover.

#hover #transform #shadow

Live preview Navigation

Horizontal Dropdown Menu

Horizontal menu with dropdown items.

#hover #transform #shadow

Live preview Navigation

Mega Menu

Large mega menu panel with multiple link groups.

#hover #transform #shadow

Live preview Navigation

Full Overlay Menu

Full screen overlay menu.

#hover #transform

Live preview Navigation

Rotate In Menu

Menu that rotates in from corner.

#hover #transform #shadow

Live preview Navigation

Side Panel Menu

Side panel menu that opens from the right.

#hover #shadow

Live preview Navigation

Slide In Menu

Menu that slides in from the left.

#hover #transform #shadow

Live preview Navigation

Zoom In Menu

Menu that zooms in from trigger.

#hover #transform #shadow

Live preview Navigation

Mesh Gradient Navbar

Navbar with a layered mesh gradient background.

#hover #gradient #shadow

Live preview Navigation

Minimal Underline Navbar

Underline-only navbar with thin animated indicator.

#hover

Live preview Navigation

3D Perspective Modal Navbar

Modal nav that flies in from depth using perspective translateZ.

#hover #animation #transform

Live preview Navigation

Blurred Backdrop Modal Navbar

Centered modal nav over a heavily blurred colored backdrop.

#hover #animation #gradient

Live preview Navigation

3D Flip In Modal Navbar

Centered modal nav that flips in on the Y axis with 3D depth.

#hover #animation #transform

Live preview Navigation

Fullscreen Modal Cover Navbar

Fullscreen modal cover with large centered nav links.

#hover #animation #transform

Live preview Navigation

Glass Popup Modal Navbar

Glassmorphism modal popup nav with frosted translucent surface.

#hover #animation #gradient

Live preview Navigation

Slide Down Modal Navbar

Centered modal nav that slides down from the top.

#hover #animation #gradient

Live preview Navigation

Zoom In Modal Navbar

Centered modal nav that zooms in from a smaller scale.

#hover #animation #gradient

Live preview Navigation

Monochrome Navbar

Black and white monochrome navbar.

#hover #border

Live preview Navigation

Neumorphic Navbar

Soft neumorphic navbar with extruded buttons.

#hover #shadow

Live preview Navigation

Ocean Blue Navbar

Ocean blue navbar with wave-like gradient.

#hover #gradient #shadow

Live preview Navigation

OKLCH Menu Bar

Bar, hover and active layers are three color-mix steps off a single OKLCH accent.

#hover #border #oklch

Live preview Navigation

Circular Orbit Menu

Center button with menu items orbiting in a circle around it.

#hover #gradient #transform

Live preview Navigation

Planet Rotation Menu

Center sun with planet items rotating around it on a continuous orbit path.

#hover #animation #gradient

Live preview Navigation

Ring Spin Menu

Menu items arranged on a ring that continuously rotates with hover-pause.

#hover #animation #gradient

Live preview Navigation

Solar System Menu

Solar system layout with planets on concentric orbit rings of different speeds.

#hover #animation #gradient

Live preview Navigation

Dark Blurred Overlay Navbar

Dark overlay with heavy backdrop blur covering the page content.

#hover #animation #gradient

Live preview Navigation

Bottom Sheet Handle Navbar

Bottom sheet with a draggable handle and pull-up indicator.

#hover #animation #gradient

Live preview Navigation

Side Panel Tabs Navbar

Side panel with vertical tabs over a dimmed overlay.

#hover #animation #gradient

Live preview Navigation

Active 3D Pagination

Active page lifts in 3D perspective.

#hover #gradient #transform

Live preview Navigation

Active Border Pagination

Active page has animated border.

#hover #transform #border

Live preview Navigation

Active Fill Pagination

Active page fills with color animation.

#hover #transform

Live preview Navigation

Active Pulse Pagination

Active page pulses with animation.

#hover #animation #shadow

Live preview Navigation

Active Rotate Pagination

Active page rotates slightly.

#hover #transform #shadow

Live preview Navigation

Active Scale Pagination

Active page scales up with bounce.

#hover #transform #shadow

Live preview Navigation

Active Shadow Pagination

Active page has deep shadow.

#hover #transform #shadow

Live preview Navigation

Arrow Bounce Pagination

Pagination with bouncing arrow buttons on hover.

#hover #animation #transform

Effects tagged #hover

Popular tags