Post thumbnail: 39 CSS Hover Effects

39 CSS Hover Effects

Collection of hand-picked free HTML and CSS hover effect code examples: animations, transitions, etc. Update of May 2018 collection. 14 new items.

Table of Contents:

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

Related Articles

  1. jQuery Hover Effects
  2. CSS Animation Libraries
  3. CSS Image Effects

CSS Hover Effect Examples

HTML and CSS hover effect code examples (34 items).

Author

  • Paul

Links

Made with

  • HTML / CSS

About the code

Pure CSS Box Hover with Background Effect

As you hover on the quotes, the background will change upon which quote you hover upon. Best viewed on a tablet or desktop screens. Total responsiveness is still to be desired.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Dronca Raul

Links

Made with

  • HTML / CSS (SCSS) / JavaScript (Babel)

About the code

Kinetic Magnetic Dot

Kinetic magnetic dot with little JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • 0guzhan

Links

Made with

  • HTML / CSS (SCSS)

About the code

Hover Effect for Boxes

Hover effect for boxes in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • Bradley Budach

Links

Made with

  • HTML / CSS

About the code

Circle Hover Effect

Pure CSS circle hover effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • ViktorKorolyuk

Links

Made with

  • HTML / CSS / JavaScript

About the code

Circular Ripple Hover Effect on Button

Hover over each of the buttons to see the effect in action.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Siddharth Hubli

Links

Made with

  • HTML / CSS

About the code

Hover for Product Info

CSS properties used: filter: drop-shadow(), clip-path: polygon(), CSS Grid.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Jouan Marcel

Links

Made with

  • HTML / CSS (SCSS)

About the code

Futuristic 3D Hover Effect

Usable as navigation, menu or effect. It uses CSS transform and perspective to create a unique hololens-like animation effect. Can be used for many more use cases, you will probably have your own ideas. This is an experimental idea, you may want to flesh it out for use in production.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • hiMRK

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Reveal Card Content on Hover

Clean card hover effect in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: material-icons.css

Author

  • Tobias Glaus

Links

Made with

  • HTML / CSS (SCSS)

About the code

Let Me See What You Got!

Hover effect for box with media content in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Yancy Min

Links

Made with

  • HTML / CSS / JavaScript

About the code

Box with Magic Zoom Effect

Box with animated magic zoom effect in pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Avi Thour

Links

Made with

  • HTML / CSS

About the code

Animated Box with Hover Effects

Animated box with hover effects in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Lukáš Werner

Links

Made with

  • HTML / CSS (SCSS)

About the code

Box Corners Animation

Box corners animation on hover in pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Radial Gradient Spotlight Effect

Author

  • George W. Park

Links

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.

Demo image: Icons Hovering

Author

  • Ying Ying Szeto

Links

Made with

  • HTML
  • CSS

About the code

Icons Hovering

Pretty hover effects for icons.

Author

  • Ryan Yu

Links

Made with

  • HTML / CSS (SCSS)

About the code

Glitch Effect on Hover

Learn how to create the glitch effect with CSS clip-path without JS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Responsive 16/9 Thumbnail & Shine Hover Effect

Author

  • Quentin Véron

Links

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.

Demo image: Hover Animation

Author

  • Cassidy Williams

Links

Made with

  • HTML
  • CSS

About the code

Hover Animation

One div hover animation.

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

download demo and code

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

download demo and code

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

download demo and code

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

download demo and code

Author

  • Russ Pate

Links

Made with

  • HTML / CSS

About the code

Pure CSS Hover Blur

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

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

download demo and code

Demo image: Lifted Paper Strips

Author

  • Bastian Andre

Links

Made with

  • HTML/Pug
  • CSS/Sass

About the code

Lifted Paper Strips

Lifted Paper Strips (Hover Effect).

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

download demo and code

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

download demo and code

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

download demo and code

Demo image: CSS Only Fade Siblings On Hover

Author

  • Shaw

Links

Made with

  • HTML
  • CSS

About the code

CSS Only Fade Siblings On Hover

Fade out all siblings when an item is hovered, using only CSS.

Demo image: Hover Effect For Discover A Project Link

Author

  • Jeremie Boulay

Links

Made with

  • HTML
  • CSS/Stylus

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

Hover Squares

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

download demo and code

Demo image: Hover Effect

Author

  • Nicola Press

Links

Made with

  • HTML/Haml
  • CSS/SCSS

About the code

Hover Effect

Animation hover effect.

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

download demo and code

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

download demo and code

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

download demo and code

Hover Effect CSS Libraries

HTML and CSS hover effect libraries (5 items).

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

download demo and code

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

download demo and code

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

download demo and code

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

download demo and code

Demo Image: HoverEffects.css
Demo Image: HoverEffects.css

HoverEffects.css

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

download demo and code

back to top