Live preview Tooltips
Pop Scale Tooltip
The bubble springs open from the trigger with a slight overshoot before settling.
#hover CSS effects
3,025 free, pure-CSS effects match the "hover" tag. Each is copy-ready and needs no library or build step.
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Silver Metallic
Silver metallic tooltip with subtle gradient above the trigger.
Live preview Tooltips
Live preview Tooltips
Slide Diagonal Bottom-Left
Tooltip slides in from the bottom-left corner of the trigger.
Live preview Tooltips
Live preview Tooltips
Spotlight Radial
Tooltip with a radial spotlight gradient highlighting its center.
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Tada Success
Success tooltip celebrates with a tada animation above the trigger.
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Timelines
Drift Eras Timeline
Blunt outlined blocks hold each century over an oversized ghost numeral and shift on hover.
Live preview Timelines
Hush Lifeline Timeline
Life events written in a quiet hand, each pinned by a slightly uneven ink ring on the margin.
Live preview Timelines
Lull Retro Timeline
Taped paper notes from three quiet weeks lean at odd angles and straighten under the cursor.
Live preview Timelines
Wander Stamp Timeline
A travel journal where every stop carries a perforated postage stamp that tilts on hover.
Live preview Accordions
Lever Commands Accordion
A command cheat sheet whose lever arm tilts over as the monospace rows appear.
Live preview Accordions
Marble Card Accordion
Card shaped rows that lift on hover and let the description rise into place.
Live preview Alerts
Mica Quiet Alert
A quiet one line notice whose timestamp slides open only while it is hovered.
Live preview Alerts
Reef Expand Alert
A compact warning that grows taller on hover to reveal the exact usage numbers.
Live preview Avatars
Anvil Quadrant Completion Meter
Four border arcs form the completion ring and the last quadrant lights up on hover.
Live preview Avatars
Aurora Banner Profile Card
A rectangular profile card whose aurora banner drifts behind the overlapping avatar.
Live preview Avatars
Basalt Overflow Counter Avatars
Three rounded-square members plus a counter chip that widens on hover.
Live preview Avatars
Bloom Expanding Capsule Avatar
The circular capsule stretches into a full name plate as the pointer enters it.
Live preview Avatars
Canyon Member Row
A directory list row where an accent bar grows and the chevron slides on hover.
Live preview Avatars
Cascade Before After Avatars
A placeholder avatar and its finished version stand side by side with an arrow.
Live preview Avatars
Chalk Split Dual Ring Avatar
A two-tone ring cut cleanly in half spins a half turn when hovered.
Live preview Avatars
Chassis Muted Microphone Avatar
A drawn microphone badge carries a slash that retracts on hover as the state flips to live.
Live preview Avatars
Dash Follower Stat Trio
Followers, posts and likes sit under the avatar in three separately hoverable cells.
Live preview Avatars
Drift Comment Thread Row
A comment line led by a small avatar whose reply tools unfold only on hover.
Live preview Avatars
Dune Completion Ring Avatar
An SVG progress ring reports profile completion and refills when hovered.
Live preview Avatars
Echo Overlapping Initials Plate
Two translucent letters overlap in screen blend and drift apart when hovered.
Live preview Avatars
Fjord Ghost Monogram
An oversized ghost letter sits behind the monogram and slides away on hover.
Live preview Avatars
Flux Hover Action Overlay
Three drawn action buttons rise over the blurred portrait while it is hovered.
Live preview Avatars
Forge Expanding Footer Card
A vertical member card whose hidden action row unfolds with an animated grid row.
Live preview Avatars
Frost Double Ring Avatar
Two concentric rings hold the initials and the outer halo widens on hover.
Live preview Avatars
Gasket Member Mosaic Wall
A twelve tile member wall dims as a whole so the hovered tile lifts out of the grid.
Live preview Avatars
Granite Zoom Reveal Avatar
The drawn portrait zooms inside its mask while a caption slides up over it.
Live preview Avatars
Hush Double Offset Shadow Tile
Two hard offset shadow layers stack behind the tile and collapse under the pointer.
Live preview Avatars
Jade Hover Profile Card
Hovering the avatar slides a compact name and role card out beside it.
Live preview Avatars
Kiln Folded Corner Member Panel
A wide member panel with a clipped folded corner, a divider and a shift counter.
Live preview Avatars
Kindle Inverted Contrast Row
A near white avatar on the dark bench swaps its contrast with the card on hover.
Live preview Avatars
Lever Overflow Count Overlay
A translucent counter layer covers the whole avatar and lifts away when hovered.
Live preview Avatars
Mesa Letter To Icon Avatar
The monogram swaps for a drawn plus glyph so the tile doubles as an add action.
Live preview Avatars
Nickel Flip Card Avatar
The avatar flips on its vertical axis to reveal the member role on the back.
Live preview Avatars
Onyx Hexagon Avatar
A clip-path hexagon frame wraps a smaller hexagon holding the initials.
Live preview Avatars
Prairie Vertical Member Column
Three members stacked in a column threaded by a single vertical guide line.
Live preview Avatars
Ratchet Open Seat Invite Slot
Two seated members sit next to a dashed empty seat whose plus turns when hovered.
Live preview Avatars
Ridge Layered Depth Avatar
Two tilted plates stack behind the avatar and fan wider when it is hovered.
Live preview Avatars
Ruby Inset Well Avatar
The portrait sinks into an embossed plate carved out with inner shadows.
Live preview Avatars
Shaft Split Disc Duo Avatar
One disc is cut into two clipped halves so a shared project reads as a single mark.
Live preview Avatars
Socket Country Corner Avatar
A tilted tricolour chip marks the country corner and straightens when hovered.
Live preview Avatars
Spiral Padding Ring Avatar
The gap around the portrait is pure padding, so hovering can widen the whole ring.
Live preview Avatars
Thicket Paired Match Avatars
Two avatars lean apart until hover pulls them together over a beating link node.
Live preview Avatars
Tide Thin Thick Ring Swap
A hairline ring and a heavy ring trade their weights when the avatar is hovered.
Live preview Avatars
Valve Team Colour Band Avatars
Each tile carries a team coloured band along its base that grows taller on hover.
Live preview Avatars
Verge Circle In Square Mask
A circular clip inside a square plate widens on hover until it fills the corners.
Live preview Avatars
Wander Skill Chip Avatar
Skill chips beside the avatar rise one after another when the row is hovered.
Live preview Avatars
Wisp Short Biography Card
A compact card pairing the avatar with a single biography line and an accent edge.
Live preview Avatars
Zenith Numbered Rank List
An ordered podium list where the first three places carry their own metal ring.
Live preview Badges
Live preview Badges
Corner Ribbon Badge
A diagonal ribbon pinned across the top-right corner of a container.
Live preview Badges
Rubber Stamp Badge
A tilted double-ruled stamp with worn edges that presses down when hovered.
Live preview Buttons
Live preview Buttons
Live preview Buttons
Live preview Buttons
Live preview Buttons
Live preview Buttons
Live preview Buttons
Live preview Buttons
Live preview Buttons
Live preview Buttons
Live preview Buttons
Live preview Buttons
Live preview Buttons
Live preview Buttons
Arrow Morph Button
Label slides left as an arrow fades in from the right on hover.
Live preview Buttons
Live preview Buttons
Arrow Slide Button
Arrow icon slides out from text on hover with smooth transition.
Live preview Buttons