Top 39 CSS Hover Effects

Collection of hand-picked free HTML and CSS hover effect code examples: animations, transitions, etc.

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. Made with HTML / CSS by Paul.

 Demo and Code

KINETIC MAGNETIC DOT

Kinetic magnetic dot with little JavaScript. Made with HTML / CSS (SCSS) / JavaScript (Babel) by Dronca Raul.

Demo and Code

HOVER EFFECT FOR BOXES

Hover effect for boxes in HTML and CSS. Made with HTML / CSS (SCSS) by 0guzhan.

 Demo and Code

CIRCLE HOVER EFFECT

Pure CSS circle hover effect. Made with HTML / CSS by Bradley Budach.

 Demo and Code

CIRCULAR RIPPLE HOVER EFFECT ON BUTTON

Hover over each of the buttons to see the effect in action. Made with HTML / CSS / JavaScript by ViktorKorolyuk.

Demo and Code

HOVER FOR PRODUCT INFO

CSS properties used: filter: drop-shadow(), clip-path: polygon(), CSS Grid. Made with HTML / CSS by Siddharth Hubli.

Demo and 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. Made with HTML / CSS (SCSS) by Jouan Marcel.

 Demo and Code

REVEAL CARD CONTENT ON HOVER

Clean card hover effect in HTML and CSS. Made with HTML (Pug) / CSS (SCSS) by hiMRK.

 Demo and Code

LET ME SEE WHAT YOU GOT!

Hover effect for box with media content in HTML and CSS. Made with HTML / CSS (SCSS) by Tobias Glaus.

 Demo and Code

BOX WITH MAGIC ZOOM EFFECT

Box with animated magic zoom effect in pure CSS. Made with HTML / CSS / JavaScript by Yancy Min.

Demo and Code

ANIMATED BOX WITH HOVER EFFECTS

Animated box with hover effects in HTML and CSS. Made with HTML / CSS by Avi Thour.

 Demo and Code

BOX CORNERS ANIMATION

Box corners animation on hover in pure CSS. Made with HTML / CSS (SCSS) by Lukáš Werner.

 Demo and Code

RADIAL GRADIENT SPOTLIGHT EFFECT

This pen shows how CSS radial gradients can be used to create a focusable spotlight effect. Made with HTML / CSS / JavaScript/Babel by George W. Park.

 Demo and Code

ICONS HOVERING

Pretty hover effects for icons. Made with HTML / CSS by Ying Ying Szeto.

 Demo and Code

GLITCH EFFECT ON HOVER

Learn how to create the glitch effect with CSS clip-path without JS. Made with HTML / CSS (SCSS) by Ryan Yu.

 Demo and 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. Made with HTML/Pug / CSS/SCSS / JavaScript by Quentin Véron.

 Demo and Code

HOVER ANIMATION

One div hover animation. Made with HTML/CSS by Cassidy Williams.

 Demo and Code

Attract Hover Effect

Attract hover effect with HTML, CSS and JavaScript. Made by Louis Hoebregts.

Demo and Code

Pure CSS Perspective Hover Effect

List of blocks with perspective effect. Made by Maxime Lafarie.

 Demo and Code

Image Hover Effect

Image with reflection and proximity effect on hover. Made by Tiago Alexandre Lopes.

 Demo and Code

Stacked Cards Hover Effects

Just playing around with more CSS transitions and hover effects. Made by Kyle Brumm.

 Demo and Code

PURE CSS HOVER BLUR

Made with HTML/CSS by Russ Pate.

 Demo and Code

CSS 3D Hover

Pure CSS 3D hover effect for cards. Made by Akhil Sai Ram.

 Demo and Code

LIFTED PAPER STRIPS

Lifted Paper Strips (Hover Effect). Made with HTML/Pug / CSS/Sass by Bastian Andre.

 Demo and Code

10 Stylish Hover Effects With LESS

A small collection of stylish effects with LESS. Made by Renan C. Araujo.

 Demo and Code

10 Stunning Hover Effects With SCSS

A small collection of stylish effects with SCSS. Made by Renan C. Araujo.

 Demo and Code

Pure CSS 3D Perspective Render With :hover Animation

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.

 Demo and Code

CSS ONLY FADE SIBLINGS ON HOVER

Fade out all siblings when an item is hovered, using only CSS. Made with HTML / CSS by Shaw.

 Demo and Code

HOVER EFFECT FOR DISCOVER A PROJECT LINK

A hover effect to discover a project name into a portfolio for example. Made with HTML / CSS/Stylus by Jeremie Boulay.

 Demo and Code

HOVER EFFECT

Animation hover effect. Made with HTML/Haml / CSS/SCSS by Nicola Press.

 Demo and Code

Direction-Aware 3D Hover Effect

CSS & bits of JS. Made by Noel Delgado.

 Demo and Code

CSS3 Hover Effects

Inspired by tympanus.net, a showcase of most CSS3 hover effects. Made by honglio.

Demo and Code

Hover Animation

Uses jQuery to add/remove classes and trigger animation only on mouse out.
Made by Matt Boldt.

 Demo and Code