CSS Hover Effects

You can use CSS to create some pretty cool hover effects. In this collection, we'll look at some popular techniques for creating hover effects to spice up your next web project.

Image overlay on hover
Displays an image overlay effect on hover.
CSS, Visual · Oct 11, 2021
Menu on image hover
Displays a menu overlay when the user hovers over the image.
CSS, Layout · Oct 11, 2021
Show additional content on hover
Creates a card that displays additional content on hover.
CSS, Visual · Oct 11, 2021
Image rotate on hover
Creates a rotate effect for the image on hover.
CSS, Animation · Oct 11, 2021
Rotating Card
Creates a two sided card which rotates on hover.
CSS, Animation · Mar 30, 2021
Perspective transform on hover
Applies a perspective transform with a hover animation to an element.
CSS, Animation · May 17, 2021
Hover underline animation
Creates an animated underline effect when the user hovers over the text.
CSS, Animation · Oct 11, 2021
Popout menu
Reveals an interactive popout menu on hover/focus.
CSS, Interactivity · Dec 30, 2020
Navigation list item hover and focus effect
Creates a custom hover and focus effect for navigation items, using CSS transformations.
CSS, Visual · Oct 11, 2021
Mouse cursor gradient tracking
A hover effect where the gradient follows the mouse cursor.
CSS, Visual · Jan 7, 2021