65+ CSS Hover Effects (Free & Open Source)

Css-only direction-aware hover effect is actually less tricky than you might think. I even might consider using it in production. Because, why not...?

A clip-path hover animation that is fully keyboard accessible

Just playing around with some interesting things you can do with CSS :hover when styling the exact same HTML elements (and their siblings).

Here's a pen on CSS hover effect. As you hover on the quotes, the background will change upon which quote you hover upon.

🛸 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.

Pure css circle hover animation. Made by Bradley Budach. Idea and design, by me.

clean card hover effect

With this hover you can take a glance at the content of a folder. (S)CSS only :) This hover effect is inspired from by this variant for the lstore.graphics page by Ruslanlatypov

A fancy animated underline using text clipping. The text uses background-clip: text and a linear-gradient background to be bi-color. We get around animating the gradient by animating the background-position instead. We have to use a wrapper element for having the underline highlight under...

Read More

Hover effect for a product. Image pops up and down, and then the background slides out and animate. It's pretty cute if you ask me.

Learn how to create the glitch effect with CSS clip-path without JS.

This pen shows how CSS radial gradients can be used to create a focusable spotlight effect. This was inspired by and builds upon Leo Sammarco's pen, Radial Gradient Move With Mouse.

So I noticed the new library view on Steam has some cool game hover effects. So I thought I'd try create something similar in CSS.

Fade out all siblings when an item is hovered, using only CSS

Video animation

A hover effect to discover a project into a portfolio.

I saw the hover effect on the links of this page and I wanted to reproduce them :)

List of blocks with perspective effect

Just playing around with more CSS transitions and hover effects.

A small collection of stylish effects with Less. See also: 10 hover effcts with scss: http://codepen.io/caraujo/pen/LVPzxO

A small collection of stylish effects with Scss. See also: 10 hover effects with less: http://codepen.io/caraujo/details/VYOjNM 30k views! YAY!

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 :)

After seeing this site http://fitzfitzpatrick.com/ I decided to give a try to the "direction-aware hover effect". My first thought was to do it with a pure CSS, not too late I changed my mind and decided to use JS (I need to sleep anyway). It's kind of simple, using JS we can easily dete...

Read More

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

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 :)

iHover is a collection of hover effects using pure CSS, inspired by codrops article, powered by Sass.

iHover is a collection of hover effects using pure CSS, inspired by codrops article, powered by Sass.

Image hover effects that work with or without bootstrap

Mocassin.css is a responsive collection of hover effects for Captions.

Several hover effects for navigation. (CSS3)

A simple game card with hover animation

Desafio 30 dias CSS - dia 21

Animated Hover Menu Indicator With HTML5 CSS 3 Okba Design Thank You

When hover on a cards the CSS transition and transform property work and you can also see the effect.

Inspired by titles on https://www.ideo.com

By adding a pseudo element with the same string of text that's in the element, you can account for the width change added from the bolder text and avoid layout shifting

A 3D button inspired by Apple iPadOS.