17 CSS Hover Effects

July 27, 2017

Collection of hand-picked free HTML and CSS hover effects. Demo and download code (*zip).

Table Of Contents:

  1. CSS Hover Effect Examples
  2. Hover Effect CSS Libraries

Related Collections:

  1. CSS Hover Buttons
  2. CSS Hover Effects For Cards
  3. CSS Hover Effects For Text
  4. CSS Hover Effects For Images

CSS Hover Effect Examples

Demo Image: Attract Hover Effect
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
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
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
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
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
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
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
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
Demo Image: Hover Squares

Hover Squares

HTML and CSS hover squares.
Made by Rudolf van der Ven
December 8, 2015

Demo Image: Direction-Aware 3D 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 Image: CSS3 Hover Effects
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 Image: Hover Animation
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

Hover Effect CSS Libraries

Demo Image: Hover.css
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
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
Demo Image: Image Hover Effects

Image Hover Effects

Image hover effects that work with or without Bootstrap.
Made by Michael

Demo Image: Mocassin.css
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
Demo Image: HoverEffects.css

HoverEffects.css

Several hover effects for navigation (CSS3).
Made by Kevin Jannis

FreeFrontend © 2016 - 2017

Back to top