Collection of hand-picked free HTML and CSS hover effect code examples (animations, transitions, etc) from Codepen, GitHub and other resources. Update of May 2021 collection. 30 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
Cool Frame Hover Effect (CSS Only)
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS OS Dock
Compatible browsers: Chrome, Edge, Opera, Safari
Responsive: no
Dependencies: open-props.css
Links
Made with
- HTML / CSS
About a code
Frame Hover Effect with One Element
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Dual Image with Hover Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Zig-Zag Border & Cool Hover Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Exploding Box Hover
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Shape Zoom Transition
A neat transition effect made with CSS masking and an SVG.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Clock Wipe Transition
The iconic clock wipe from Star Wars movies, created with a conic gradient mask and animated via CSS custom properties.
Compatible browsers: Chrome, Edge, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Iris Wipe Transition
Animating a radial gradient mask to create an iris wipe effect, like in Star Wars movies.
Compatible browsers: Chrome, Edge, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Horizontal Wipe Transition
An animated horizontal scene wipe, like in the Star Wars movies. Uses a CSS gradient mask.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS Only Cool Hover Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Hover Effects Overview
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS Only Border Hover Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS Only Hover Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Underline on Hover
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Mouse-Out Hover Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Cool Hover Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Haml) / CSS (SCSS)
About a code
Full CSS Growing Dot Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Multiple Hover's for One Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Item Animation (Hover)
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Yin & Yang Cats
Direction aware, CSS only, yin & yang implementation of cuddling cats. The logic will detect which of the cats the mouse entered and zoom in on it. No JS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Stylus)
About a code
Hover Panels
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Team Profile Hover Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
CSS Hover Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Gallery Hover Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
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
About a code
Image Hover Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
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 (Pug) / CSS (Stylus)
About a code
Fullscreen Background Outline Hover Effect 60fps
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
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
About a code
3D Image Hover Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
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 (Pug) / CSS (SCSS)
About a code
Fluent Design: Rebuild
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
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 a code
Hover and Scale Blocks UI Concept - CSS CSS-only
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
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