Collection of hand-picked free HTML and CSS hover effect code examples: animations, transitions, etc. Update of February 2020 collection. 18 new items.
Table of Contents:
Related Articles
CSS Hover Effect Examples
HTML and CSS hover effect code examples.
Links
Made with
- HTML / CSS (SCSS)
About a code
Mapping Mouse Position in CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Hover Rays with Masking and Houdini Magic
Compatible browsers: Chrome, Edge, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
About Us Pop-Out Effect
Using clip-path: path(...) to create a pop-out effect.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Cross-browser No Image Duplication Reveal Effect with Real img Elments
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Subtle Cross When Hovering on a Grid's Item Corners
Inspired from a Windows 10 Fluent Design effect on the Calculator App, where hovering over an item shows a subtle cross in the corner closest to the cursor.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Underline-Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS Mouse-Out Transition Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Pattern + Background Combo
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS
About a code
Supa Dupa Fly Hover
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
CSS Only Hologram Effect Button 3D Icon
This is a no Javascript button; when you hover your mouse on the button, a 3D icon will appear, like hologram effect. The button may be rotated by moving the mouse pointer over the button.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Card Hover Info Interaction
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Card Pseudo-Element Hover
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
CSS Nugget: Styling Siblings on Hover
Use the :not CSS selector to stylize siblings on hover.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Fancy Slide-in Hover CSS Only
Slick hover effect using some positioning and a pseudo class. Works with every size.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Refer Friends Hover Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Art is Pointless
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Rainbow Stacked Accordion Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
CSS-only direction-aware hover effect
Comes with a Sass @mixin so that you can quickly modify the number of columns and items. Also, you can resize the window. It keeps working when grid changes.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Clip-Path Hover Animation
A clip-path hover animation that is fully keyboard accessible.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (SCSS)
About a code
Fun with :hover
Just playing around with some interesting things you can do with CSS :hover when styling the exact same HTML elements (and their siblings).
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Tile Hover Multi-Button
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Less)
About a code
Connections CSS Hover FX
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Less)
About a code
CSS Hover FX
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Smooth And Sharp
Transforming edges hover effect in pure CSS.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Tessellations eCommerce
Tessellations eCommerce grid items with hover effects.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Staggered Animations
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
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: -
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: -
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
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: -
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: -
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: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Hover Effect Like Super Team Deluxe
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
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: -
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
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: -
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: -
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: -
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: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Hover Effect: Pop and Background Animate
Hover effect for a product. An image pops up and down, and then the background slides out and animate.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
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.
Links
Made with
- HTML
- CSS
About the code
Icons Hovering
Pretty hover effects for icons.
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: -
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.
Links
Made with
- HTML
- CSS
About the code
Hover Animation
One div hover animation.
Attract Hover Effect
Attract hover effect with HTML, CSS and JavaScript.
Made by Louis Hoebregts
July 6, 2017
Pure CSS Perspective Hover Effect
List of blocks with perspective effect.
Made by Maxime Lafarie
July 6, 2017
Image Hover Effect
Image with reflection and proximity effect on hover.
Made by Tiago Alexandre Lopes
June 2, 2017
Stacked Cards Hover Effects
Just playing around with more CSS transitions and hover effects.
Made by Kyle Brumm
May 17, 2017
Links
Made with
- HTML / CSS
About the code
Pure CSS Hover Blur
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
CSS 3D Hover
Pure CSS 3D hover effect for cards.
Made by Akhil Sai Ram
December 24, 2016
Links
Made with
- HTML/Pug
- CSS/Sass
About the code
Lifted Paper Strips
Lifted Paper Strips (Hover Effect).
10 Stylish Hover Effects With LESS
A small collection of stylish effects with LESS.
Made by Renan C. Araujo
October 13, 2016
10 Stunning Hover Effects With SCSS
A small collection of stylish effects with SCSS.
Made by Renan C. Araujo
October 13, 2016
:hover AnimationPure 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
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.
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.
Hover Squares
HTML and CSS hover squares.
Made by Rudolf van der Ven
December 8, 2015
Links
Made with
- HTML/Haml
- CSS/SCSS
About the code
Hover Effect
Animation hover effect.
Links
Made with
- HTML / CSS (SCSS)
About a code
Pure CSS Questionnaire Concept
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Direction-Aware 3D Hover Effect
CSS & bits of JS.
Made by Noel Delgado
October 30, 2014
CSS3 Hover Effects
Inspired by tympanus.net, a showcase of most CSS3 hover effects.
Made by honglio
November 21, 2013
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
HTML and CSS hover effect libraries (5 items).
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
iHover.css
iHover is a collection of hover effects using pure CSS, inspired by codrops article, powered by Sass.
Made by gudh
Image Hover Effects
Image hover effects that work with or without Bootstrap.
Made by Michael
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
HoverEffects.css
Several hover effects for navigation (CSS3).
Made by Kevin Jannis