explaingit

ianlunn/hover

Analysis updated 2026-06-20

29,396SCSSAudience · designerComplexity · 1/5Setup · easy

TLDR

A ready-made collection of CSS hover animations, add a class name to any button, link, or image and get smooth, polished effects like grow, bounce, or rotate without writing CSS from scratch.

Mindmap

mindmap
  root((Hover.css))
    What it does
      Hover animation effects
      Add via class names
      No JS needed
    Format options
      Plain CSS
      Sass
      LESS
    Use cases
      Buttons and links
      Images and logos
      Icon animations
    Audience
      Web designers
      Frontend developers
      No-code builders
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Add a grow or bounce animation to navigation buttons on a website by just adding a class name, with no CSS coding required.

USE CASE 2

Apply polished hover effects across an entire landing page quickly by including the full Hover.css stylesheet and marking elements with class names.

USE CASE 3

Customize animation timing and class name prefixes using the Sass version before generating your own minified stylesheet for production.

What is it built with?

SCSSCSSLESS

How does it compare?

ianlunn/hovermdbootstrap/mdb-ui-kitnostalgic-css/nes.css
Stars29,39624,26421,719
LanguageSCSSSCSSSCSS
Setup difficultyeasyeasyeasy
Complexity1/52/51/5
Audiencedesignervibe coderdesigner

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

No build step required for the plain CSS version, just include the file and add class names to elements.

Not specified in the explanation.

In plain English

Hover.css is a collection of ready-made visual effects that activate when a user moves their mouse over an element on a web page, a button, a link, an image, a logo, or any other element. The problem it solves is that creating smooth, polished hover animations from scratch with CSS requires knowing specific CSS3 properties (transitions, transforms, animations, pseudo-elements) and getting the details right, this library provides them pre-built so you can apply them by adding a class name. There are two main ways to use it. The simpler approach is to copy only the specific effect you want from the stylesheet into your own CSS file, keeping your page lightweight. The broader approach is to include the entire Hover.css stylesheet and then apply effects across many elements just by adding the right class, for example, adding the class that produces a "grow" effect makes the element visually enlarge on hover. Icon effects are also included: you can attach animated icons inside elements using a special marker class. The library is available in plain CSS, Sass, and LESS formats. Sass and LESS are preprocessor languages that extend CSS with variables and mixins, having those versions lets developers customize things like the class name prefix or animation timing before generating the final CSS. A web designer or front-end developer would use this when they want to add polished interactive effects to a site quickly without writing the CSS transitions manually. Browser support requires Internet Explorer 9 or later for transforms and Internet Explorer 10 or later for animations.

Copy-paste prompts

Prompt 1
I want to add a hover animation to my website's call-to-action button using Hover.css. Show me how to include the library in my HTML and which class to add to make the button grow on hover.
Prompt 2
I'm using Hover.css in a project but only want the 'pulse' and 'wobble' effects to keep my CSS file small. Show me how to copy just those two effects from the hover.css source into my own stylesheet.
Prompt 3
I want to customize Hover.css using the Sass version to change the animation duration and rename all class prefixes from 'hvr-' to 'my-'. Walk me through editing the Sass variables and compiling the output.
Prompt 4
How do I apply Hover.css icon effects to a navigation menu so that each menu item shows an animated arrow icon when hovered?

Frequently asked questions

What is hover?

A ready-made collection of CSS hover animations, add a class name to any button, link, or image and get smooth, polished effects like grow, bounce, or rotate without writing CSS from scratch.

What language is hover written in?

Mainly SCSS. The stack also includes SCSS, CSS, LESS.

What license does hover use?

Not specified in the explanation.

How hard is hover to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is hover for?

Mainly designer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Scan in gitsafehub Deploy in gitdeployhub ianlunn on gitmyhub

Verify against the repo before relying on details.