17 CSS Hover Effects
Collection of hand-picked free HTML and CSS hover effects. Demo and download code (*zip).
- CSS Hover Effect Examples
- Hover Effect CSS Libraries
- CSS Hover Buttons
- CSS Hover Effects For Cards
- CSS Hover Effects For Text
- CSS Hover Effects For Images
Demo GIF: Attract Hover Effect
Attract Hover Effect
Attract hover effect with HTML, CSS and JavaScript.
Made by Louis Hoebregts
July 6, 2017
Demo Image: Pure CSS Perspective Hover Effect
Pure CSS Perspective Hover Effect
List of blocks with perspective effect.
Made by Maxime Lafarie
July 6, 2017
Demo Image: Image Hover Effect
Image Hover Effect
Image with reflection and proximity effect on hover.
Made by Tiago Alexandre Lopes
June 2, 2017
Demo Image: Stacked Cards Hover Effects
Stacked Cards Hover Effects
Just playing around with more CSS transitions and hover effects.
Made by Kyle Brumm
May 17, 2017
Demo Image: CSS 3D Hover
CSS 3D Hover
Pure CSS 3D hover effect for cards.
Made by Akhil Sai Ram
December 24, 2016
Demo Image: 10 Stylish Hover Effects With LESS
10 Stylish Hover Effects With LESS
A small collection of stylish effects with LESS.
Made by Renan C. Araujo
October 13, 2016
Demo Image: 10 Stunning Hover Effects With SCSS
10 Stunning Hover Effects With SCSS
A small collection of stylish effects with SCSS.
Made by Renan C. Araujo
October 13, 2016
Demo Image: Pure CSS 3D Perspective Render With :hover Animation
Pure CSS 3D Perspective Render With :hover Animation
Tip: To keep this 3D look you must know a detail, the length of the word must be proportional to the body’s perspective property number. If the length of this word increase you must increase the perspective too :)
Made by Rafael González
September 16, 2016
Demo Image: Hover Squares
Hover Squares
HTML and CSS hover squares.
Made by Rudolf van der Ven
December 8, 2015
Demo GIF: Direction-Aware 3D Hover Effect
Direction-Aware 3D Hover Effect
CSS & bits of JS.
Made by Noel Delgado
October 30, 2014
Demo GIF: CSS3 Hover Effects
CSS3 Hover Effects
Inspired by tympanus.net, a showcase of most CSS3 hover effects.
Made by honglio
November 21, 2013
Demo GIF: Hover Animation
Hover Animation
Uses jQuery to add/remove classes and trigger animation only on mouse out.
Made by Matt Boldt
July 8, 2013
Demo Image: Hover.css
Hover.css
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.
Made by Ian Lunn
Demo Image: iHover.css
iHover.css
iHover is a collection of hover effects using pure CSS, inspired by codrops article, powered by Sass.
Made by gudh
Demo Image: Image Hover Effects
Image Hover Effects
Image hover effects that work with or without Bootstrap.
Made by Michael
Demo Image: Mocassin.css
Mocassin.css
Mocassin.css is a responsive collection of hover effects for captions, powered by Sass. Each caption is adapt the size of the image.
Made by Eliezer Pujols
Demo Image: HoverEffects.css
HoverEffects.css
Several hover effects for navigation (CSS3).
Made by Kevin Jannis