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