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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
PURE CSS HOVER BLUR
Made with HTML/CSS by Russ Pate.
See the Pen
Pure CSS Hover Blur by Russ Pate (@russpate)
on CodePen.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
