26 CSS Hover Effects
Collection of hand-picked free HTML and CSS hover effect code examples: animations, transitions, etc. Update of July 2017 collection. 8 new items.
- CSS Hover Effect Examples
- Hover Effect CSS Libraries
![Demo image: Reactive Type On Hover]( "Reactive Type On Hover")
Author
- Alex Carpenter
Made with
- HTML / CSS (SCSS) / JavaScript (Babel)
About the code
Reactive Type On Hover
Different sizes and weights of the face by making individual letters respond to mouse movements.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: Google Fonts
Author
- George W. Park
Made with
- HTML
- CSS
- JavaScript/Babel
About the code
Radial Gradient Spotlight Effect
This pen shows how CSS radial gradients can be used to create a focusable spotlight effect.
Author
- Ying Ying Szeto
About the code
Icons Hovering
Pretty hover effects for icons.
Author
- Quentin Véron
Made with
- HTML/Pug
- CSS/SCSS
- JavaScript
About the code
Responsive 16/9 Thumbnail & Shine Hover Effect
This thumbnail maintain 16/9 aspect ratio at any size. There are a shine hover effect and a little animation when launching the video. Shine effect using CSS variables inspired by Raul Dronca.
Author
- Cassidy Williams
About the code
Hover Animation
One div hover animation.
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
Author
- Bastian Andre
About the code
Lifted Paper Strips
Lifted Paper Strips (Hover Effect).
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
About the code
CSS Only Fade Siblings On Hover
Fade out all siblings when an item is hovered, using only CSS.
Author
- Jeremie Boulay
About the code
Hover Effect For Discover A Project Link
A hover effect to discover a project name into a portfolio for example.
Demo Image: Hover Squares
Hover Squares
HTML and CSS hover squares.
Made by Rudolf van der Ven
December 8, 2015
Author
- Nicola Press
About the code
Hover Effect
Animation hover effect.
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