Pure CSS Hover Effects
CSS hover effects react when a pointer moves over an element: image zooms, underline reveals, color shifts, lifted cards and animated links, all done in CSS.
27 free examples, most liked first. Click one to preview it and copy the code.
Radial Hover Fill Card
by @admin · Cards
Expanding Flex Gallery
by @admin · Accordion
Hover Blur Reveal
by @admin · Hover
Caption Slide Overlay Card
by @admin · Cards
Product Image Swap
by @admin · Hover
Marker Highlight Text
by @admin · Hover
Zoom On Hover Card
by @admin · Cards
Emoji Reaction Bar
by @admin · Hover
Page Curl Corner
by @admin · Hover
Radio Star Rating
by @admin · Hover
Data Attribute Tooltip
by @admin · Hover
Ghost Button Fill Sweep
by @admin · Buttons
Four Direction Tooltips
by @admin · Hover
Hexagon Hover Grid
by @admin · Hexagons
Hover Fan Card Stack
by @admin · Cards
Hexagon Flip Tiles
by @admin · Hexagons
Wavy Underline Link
by @admin · Hover
Offset Double Line Border
by @admin · Border
Dimming Link List
by @admin · Hover
Hover Focus Tile Grid
by @admin · Hover
Expanding Icon Label Bar
by @admin · Hover
Stacked Avatar Group
by @admin · Hover
Corner Slide Border Card
by @admin · Border
Icon Flip Swap
by @admin · Buttons
Underline Grow Link Row
by @admin · Hover
Team Member Card
by @admin · Cards
Tag Cloud Chips
by @admin · Hover
Learn how it works
Read the step-by-step guide: CSS Button Hover Effects: 4 Pure CSS Examples You Can Copy
Hover Effects FAQ
How do I add a hover effect with CSS?
Write the normal style, then a :hover version of the same selector with the changes, and add a transition so the change animates. Copy any example here to start.
How do I use these pure CSS hover effects?
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.