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.

See the Pen
Pure CSS Box Hover with Background Effect
by Paul (@Paul2512C)
on CodePen.

 Demo and Code

KINETIC MAGNETIC DOT

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

See the Pen
Kinetic Magnetic Dot •
by Dronca Raul (@rauldronca)
on CodePen.

Demo and Code

HOVER EFFECT FOR BOXES

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

See the Pen
🌟 More boxes 🌟
by 0guzhan (@0guzhan)
on CodePen.

 Demo and Code

CIRCLE HOVER EFFECT

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

See the Pen
Pure CSS Circle Hover Affect
by Bradley Budach (@budachb)
on CodePen.

 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.

 

See the Pen
Circular Ripple Hover Effect on Button
by ViktorKorolyuk (@ViktorKorolyuk)
on CodePen.

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.

See the Pen
Hover For Product Info
by Siddharth Hubli (@SRHubli)
on CodePen.

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.

See the Pen
Futuristic 3D Hover Effect 🛸
by Jouan Marcel (@jouanmarcel)
on CodePen.

 Demo and Code

REVEAL CARD CONTENT ON HOVER

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

See the Pen
Reveal Card Content on Hover
by Mark (@markmead)
on CodePen.

 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.

See the Pen
Let me see what you got!
by Tobias Glaus (@tobiasglaus)
on CodePen.

 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.

See the Pen
Box with magic zoom effect
by Yancy Min (@yancy)
on CodePen.

Demo and Code

ANIMATED BOX WITH HOVER EFFECTS

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

See the Pen
Animated Box with Hover Effects
by Avi Thour (@avithour)
on CodePen.

 Demo and Code

BOX CORNERS ANIMATION

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

See the Pen
Box corners animation
by Lukáš Werner (@Sherpa23)
on CodePen.

 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.

See the Pen
Radial Gradient Spotlight Effect
by George W. Park (@GeorgePark)
on CodePen.

 Demo and Code

ICONS HOVERING

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

See the Pen
Icons hovering – #002
by Ying Ying Szeto (@yingyingszeto)
on CodePen.

 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.

See the Pen
Glitch Effect on Hover
by Ryan Yu (@iamryanyu)
on CodePen.

 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.

See the Pen
Youtube card
by Quentin Veron (@VeronQ)
on CodePen.

 Demo and Code

HOVER ANIMATION

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

See the Pen
One div hover animation
by Cassidy Williams (@cassidoo)
on CodePen.

 Demo and Code

Attract Hover Effect

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

See the Pen
Attract hover effect
by Louis Hoebregts (@Mamboleoo)
on CodePen.

Demo and Code

Pure CSS Perspective Hover Effect

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

See the Pen
Perspective hover effect (CSS only)
by Maxime Lafarie (@maximelafarie)
on CodePen.

 Demo and Code

Image Hover Effect

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

See the Pen
Image with reflection and proximity effect on hover
by Tiago Alexandre Lopes (@TiagoLopes)
on CodePen.

 Demo and Code

Stacked Cards Hover Effects

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

See the Pen
Stacked Cards Hover Effects
by Kyle Brumm (@kjbrum)
on CodePen.

 Demo and Code

PURE CSS HOVER BLUR

Made with HTML/CSS by Russ Pate.

See the Pen
Pure CSS Hover Blur
by Russ Pate (@russpate)
on CodePen.

 Demo and Code

CSS 3D Hover

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

See the Pen
World Places (CSS 3d hover)
by Akhil Sai Ram (@akhil_001)
on CodePen.

 Demo and Code

LIFTED PAPER STRIPS

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

See the Pen
Lifted Paper Strips (Hover Effect)
by Bastian Andre (@BastianAndre)
on CodePen.

 Demo and Code

10 Stylish Hover Effects With LESS

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

See the Pen
10 stylish hover effects with less
by Renan C. Araujo (@caraujo)
on CodePen.

 Demo and Code

10 Stunning Hover Effects With SCSS

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

See the Pen
10 stunning hover effects with sass
by Renan C. Araujo (@caraujo)
on CodePen.

 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.

See the Pen
Pure CSS 3D perspective render + :hover anim
by Rafael González (@rgg)
on CodePen.

 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.

See the Pen
CSS-only Fade Siblings on Hover
by Shaw (@shshaw)
on CodePen.

 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.

See the Pen
_ CSS Hover effect _
by Jeremie Boulay (@Jeremboo)
on CodePen.

 Demo and Code

HOVER EFFECT

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

See the Pen
Animation hover effect
by Nicola Pressi (@ibanez182)
on CodePen.

 Demo and Code

Direction-Aware 3D Hover Effect

CSS & bits of JS. Made by Noel Delgado.

See the Pen
Direction-aware 3D hover effect (Concept)
by Noel Delgado (@noeldelgado)
on CodePen.

 Demo and Code

CSS3 Hover Effects

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

See the Pen
CSS3 Hover Effects
by honglio (@honglio)
on CodePen.

Demo and Code

Hover Animation

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

See the Pen
Hover Animation
by Matt Boldt (@mattboldt)
on CodePen.

 Demo and Code

Praveen Kumar

I am a fullstack web developer with a passion for SEO, creating stunning websites, and organic marketing. I am a perfectionist.

Post navigation