Hover

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.

29,203

5,790

29,203

View on GitHub View on NPM

Top Related Projects

animate.css

80,541

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

magic

8,433

CSS3 Animations with special effects

hamburgers

7,047

Tasty CSS-animated Hamburgers

anime

49,575

JavaScript animation engine

choreographer-js

1,999

A simple library to take care of complicated animations.

Quick Overview

Hover is a collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and more. The effects are available in CSS and SASS, making it easy to integrate into various web projects. Hover aims to provide a simple way to add engaging interactions to web elements.

Pros

Easy to use and implement with minimal setup
Wide variety of hover effects (over 40 different effects)
Compatible with modern browsers and responsive design
Available in both CSS and SASS formats

Cons

Some effects may not work well on touch devices
Relies on CSS3, which may not be fully supported in older browsers
Limited customization options without modifying the source code
May require additional JavaScript for more complex interactions

Code Examples

Adding a basic 2D transition effect:

<a href="#" class="hvr-grow">Grow</a>

Applying a background transition effect:

<a href="#" class="hvr-sweep-to-right">Sweep to Right</a>

Using a speech bubble effect:

<a href="#" class="hvr-bubble-float-right">Bubble Float Right</a>

Getting Started

Include the Hover CSS file in your HTML:

<link href="css/hover.css" rel="stylesheet">

Add the desired hover effect class to your HTML element:

<a href="#" class="hvr-float">Float</a>

For using Sass, import the hover.scss file in your main Sass file:

@import 'path/to/hover';

Optionally, include Hover.css as a Sass plugin in your project:

@import 'hover';

Competitor Comparisons

animate.css

80,541

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

Pros of animate.css

Offers a wider variety of animations, including entrances, exits, and attention-seekers
Provides utility classes for controlling animation duration, delay, and iteration count
Supports custom builds to reduce file size by including only needed animations

Cons of animate.css

Larger file size when using the full library (compared to Hover's focused approach)
May require additional JavaScript for more complex animation sequences
Some animations might be considered too flashy or distracting for certain designs

Code Comparison

Hover:

.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  backface-visibility: hidden;
}

animate.css:

.animate__animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.animate__fadeIn {
  animation-name: fadeIn;
}

Both libraries provide easy-to-use CSS classes for adding animations to elements. Hover focuses on hover effects and transitions, while animate.css offers a broader range of keyframe animations. Hover's approach is more lightweight and specific to interactive elements, whereas animate.css provides more versatility for various animation needs throughout a website or application.

magic

8,433

CSS3 Animations with special effects

Pros of Magic

Offers a wider variety of animation effects, including entrances, exits, and attention-seekers
Includes more complex animations like rotations, flips, and perspective changes
Provides CSS classes for both animation and timing control

Cons of Magic

Larger file size due to the extensive collection of animations
May require more effort to customize or fine-tune specific animations
Some animations might be considered too flashy or distracting for certain projects

Code Comparison

Magic:

.magictime {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

.puffIn {
  -webkit-animation-name: puffIn;
  animation-name: puffIn;
}

Hover:

.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  transition-duration: 0.3s;
  transition-property: transform;
}

Both libraries provide CSS-based animations, but Magic focuses on keyframe animations for entrance and exit effects, while Hover emphasizes interactive hover effects using transitions. Magic offers more variety in animation types, while Hover provides simpler, more subtle effects that are often better suited for user interface elements.

hamburgers

7,047

Tasty CSS-animated Hamburgers

Pros of Hamburgers

Focused specifically on hamburger menu animations
Offers a wider variety of hamburger menu styles and animations
Provides SASS mixins for easy customization

Cons of Hamburgers

Limited to hamburger menu animations only
Requires more setup and configuration for each menu type

Code Comparison

Hover:

.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  backface-visibility: hidden;
}

Hamburgers:

.hamburger {
  padding: $hamburger-padding-y $hamburger-padding-x;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
}

Both repositories provide CSS-based animations, but they serve different purposes. Hover offers a wide range of general-purpose hover effects for various elements, while Hamburgers focuses exclusively on hamburger menu animations. Hover is more versatile and easier to implement for simple hover effects, whereas Hamburgers provides more specialized and customizable options for hamburger menus. The code snippets demonstrate the different approaches: Hover uses straightforward CSS classes, while Hamburgers utilizes SASS variables for enhanced customization.

anime

49,575

JavaScript animation engine

Pros of anime

More versatile, capable of animating various CSS properties and JavaScript objects
Offers more advanced animation control, including timelines and staggering
Smaller file size, making it more lightweight for web projects

Cons of anime

Steeper learning curve due to its more complex API
Requires JavaScript to function, unlike Hover's pure CSS approach
May be overkill for simple hover effects or basic animations

Code Comparison

Hover (CSS):

.hover-effect {
  display: inline-block;
  vertical-align: middle;
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  backface-visibility: hidden;
  transition-duration: 0.3s;
  transition-property: transform;
}

anime (JavaScript):

anime({
  targets: '.element',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#FFF',
  duration: 800,
  easing: 'easeInOutQuad'
});

Hover focuses on simple CSS transitions for hover effects, while anime provides a more powerful JavaScript-based animation engine capable of complex animations and transformations. Hover is easier to implement for basic hover effects, but anime offers greater flexibility and control for more advanced animation needs.

choreographer-js

1,999

A simple library to take care of complicated animations.

Pros of Choreographer-js

More versatile, allowing for complex animations and scrolling effects
Lightweight and performant, with minimal dependencies
Provides greater control over animation timing and easing

Cons of Choreographer-js

Steeper learning curve compared to Hover's simpler approach
Requires more setup and configuration for basic effects
Less suitable for quick, simple hover animations

Code Comparison

Hover:

.hover-effect {
  display: inline-block;
  vertical-align: middle;
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  backface-visibility: hidden;
  transition-duration: 0.3s;
  transition-property: transform;
}

Choreographer-js:

var choreographer = new Choreographer({
  animations: [
    {
      range: [-1, 1],
      selector: '#myElement',
      type: 'scale',
      style: 'opacity',
      from: 0,
      to: 1
    }
  ]
});

Hover focuses on simple CSS transitions for hover effects, while Choreographer-js offers a more programmatic approach to creating complex animations. Hover is easier to implement for basic hover effects, but Choreographer-js provides greater flexibility and control over animations, especially for scroll-based effects.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Hover.css

Demo | Tutorial

Download/Install
How To Use
What's Included?
- css
- scss/less
- Other
Browser Support
Using Grunt for Development
Using Sass/LESS for Development
- _hacks
- _mixins
- _options
Contribute to Hover.css
Licenses
- Commercial License
- Open-Source License
Hire Ian Lunn

Download/Install

NPM: npm install hover.css --save
Bower: bower install hover --save
Download Zip

How To Use

Hover.css can be used in a number of ways; either copy and paste the effect you'd like to use in your own stylesheet or reference the stylesheet. Then just add the class name of the effect to the element you'd like it applied to.

A. Copy and Paste an Effect

If you plan on only using one or several effects, it's better practice to copy and paste an effect into your own stylesheet, so a user doesn't have to download css/hover.css in its entirety.

Assuming you want to use the Grow effect:

Download Hover.css

In css/hover.css, find the Grow CSS (each effect is named using a comment above it):

/* Grow */
.hvr-grow {
    display: inline-block;
    vertical-align: middle;
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: transform;
}

.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
    transform: scale(1.1);
}

Copy this effect and then paste it into your own stylesheet.
In the HTML file which you'd like the effect to appear, add the class of .hvr-grow to your chosen element.

Example element before applying Hover.css effect:

<a href="#">Add to Basket</a>

Example element after applying Hover.css effect:

<a href="#" class="hvr-grow">Add to Basket</a>

Note: As of 2.0.0 all Hover.css class names are prefixed with hvr- to prevent conflicts with other libraries/stylesheets. If using Sass/LESS, this can easily be changed using the $nameSpace/@nameSpace variable in scss/_options.scss or less/_options.less.

B. Reference Hover.css

If you plan on using many Hover.css effects, you may like to reference the entire Hover.css stylesheet.

Download hover-min.css
Add hover-min.css to your websites files, in a directory named css for example
Reference hover-min.css in <head> of the HTML page you'd like to add Hover.css effects to:

<head>
	<link href="css/hover-min.css" rel="stylesheet">
</head>

Alternatively you can add a reference into an existing stylesheet like so (this may be useful to WordPress users who are unable to edit HTML):

@import url("hover-min.css");

Assuming you want to use the Grow effect, in the HTML file you'd like to use this effect, add the class of .hvr-grow to your chosen element.

Example element before applying Hover.css effect:

<a href="#" class="button">Add to Basket</a>

Example element after applying Hover.css effect:

<a href="#" class="button hvr-grow">Add to Basket</a>

A Note on the `display` Property

To make an element "transformable", Hover.css gives the following to all elements it is applied to:

display: inline-block;
vertical-align: middle;

Should you wish to override this behavior, either remove the above CSS from Hover.css or change the display property for the element. Be sure to declare the override after the Hover.css declarations so the CSS cascade will take effect. Alternatively, if you are using the Sass/LESS version of Hover.css, you can remove/comment out the forceBlockLevel() mixin found in scss/_hacks.scss or less/_hacks.less.

For more information about Transformable elements, see the CSS Transforms Module.

Using Icon Effects

To add a Hover.css icon, place the icon HTML inside the element that a Hover.css effect is applied to. For example:

<a href="#" class="hvr-icon-forward">
  Icon Forward
  <i class="fa fa-chevron-circle-right hvr-icon"></i>
</a>

In the above code, we have given a link element a class of hvr-icon-forward which will make an icon move forward when the link is hovered over. The icon itself is given a class of hvr-icon to let Hover.css know that this is the icon we want to animate. In this example, our icon is from FontAwesome, which we've loaded into the <head></head> of our web page as per FontAwesome's instructions, like so:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">

Note: As of Hover.css v2.3.0 you can use any method you like for adding icons (previously, only FontAwesome was supported out-of-the-box.) For example, you could use another icon library or instead, use an image like so:

<a href="#" class="hvr-icon-spin">
  Icon Spin
  <img src="myicon.svg" class="hvr-icon" />
</a>

Here, the image will act as the icon because it has the hvr-icon class applied to it, and when hovered over, the icon will spin as defined by the hvr-icon-spin class on the parent element.

Position of the icon is entirely in your control. You could place it before the text, like so:

<a href="#" class="hvr-icon-spin">
  <img src="myicon.svg" class="hvr-icon" />
  Icon Spin
</a>

Or use custom CSS to position the icon as you see fit.

What's Included?

The project consists of the following folders and files:

css

demo-page.css - Contains styles to demonstrate Hover. Not required in your projects
hover-min.css - The minified/production version of Hover.css
hover.css - The development version of Hover.css

scss/less

effects - Contains each individual effect sorted into categorized folders
_hacks.scss/_hacks.less, _mixins.scss/_mixins.less, _options.scss/_options.less - Sass/LESS Utilities
hover.scss/hover.less - Development version of Hover.css in Sass and LESS flavours

Other

Other files of note include:

index.html - Demonstrates all Hover.css effects
Gruntfile.js - Used for development of Hover.css via Grunt.

Browser Support

Many Hover.css effects rely on CSS3 features such as transitions, animations, transforms and pseudo-elements, for that reason, effects may not fully work in older browsers.

Transitions and Animations - not supported below Internet Explorer 10
Transforms - not supported below Internet Explorer 9
Generated Content (pseudo-elements) - not supported below Internet Explorer 8

Aside from the above mentioned browsers, Hover.css is supported across all major browsers. Please see caniuse.com for full support for many web technologies and test your webpages accordingly. It is recommended to apply fallback effects for older browsers, using CSS supported by those browsers or a feature testing library such as Modernizr.

Using Grunt for Development

Grunt is non-essential but can speed up development. With Grunt installed, run grunt from the command line to set up a development server accessed at http://127.0.0.1:8000/ or your local IP for network testing. With Grunt running, Sass or LESS will be preprocessed (depending on whether you work out of the scss or less folder) and CSS files will be minified.

Note: Originally Grunt was set up to autoprefix CSS properties but to make the project as accessible as possible, this is no longer the case. The prefixed(property, value) Sass/LESS mixin should be used for browser prefixing instead. See Using Sass/LESS for Development and [Using LESS for Development].

Using Sass/LESS for Development

Sass/LESS are non-essential but can speed up development. Preprocess Sass/LESS with your favourite software or the environment provided via Grunt.

Sass/LESS is used in the Hover.css project to separate various CSS into specific files. Each effect is within its own file in the effects directory. Hover.css also uses the following .scss and .less files:

_hacks

Contains hacks (undesirable but usually necessary lines of code) applied to certain effects. Hacks explained here.

_mixins

Contains prefixed and keyframes mixins that apply the necessary prefixes you specify in _options.scss / _options.less to properties and keyframes.

Properties can be prefixed like so:

Sass:

@include prefixed(transition-duration, .3s);

LESS:

.prefixed(transition-duration, .3s);

The prefixed mixin is passed the property you want to prefix, followed by its value.

Keyframes can be prefixed like so:

Sass:

@include keyframes(my-animation) {
    to {
        color: red;
    }
}

The keyframes mixin is passed the keyframe name, followed by the content using the @content directive.

LESS:

.keyframes(my-animation, {
    to {
        color: red;
    }
});

The keyframes mixin is passed the keyframe name, followed by the content, both as arguments.

_options

Contains default options, various effect options and the browser prefixes you'd like to use with the prefixed mixin. By default, only the -webkit- prefix is set to true (due to most browsers not requiring prefixes now).

As of 2.0.0, _options also includes a $nameSpace / @nameSpace option which allows you to change the name all classes are prefixed with. The default namespace is hvr.

The $includeClasses / @includeClasses option by default is set to true and will generate all Hover.css effects under their own class names, hvr-grow for example. Should you wish to add the properties that make up Hover.css effects to your own class names, set this option to false.

Contribute to Hover.css

If you'd like to contribute your own effects, please see the Contributing Guide.

Licenses

Hover.css is made available under a free personal/open source or paid commercial licenses depending on your requirements. To compare licenses please visit the Ian Lunn Design Limited Store and purchase a commercial license here.

Personal/Open Source

For personal/open source use, Hover.css is made available under a MIT license

Use in unlimited personal applications
Your application can't be sold
Your modifications remain open-source
Free updates

Read full license

Commercial

For commercial use, Hover.css is made available under Commercial, Extended Commercial, and OEM Commercial licenses.

Commercial License

Use in 1 application
Sell your application once only (e.g. a website sold to a client)
Your code is kept proprietary, to yourself
Free updates to the major version

Purchase | Read full license

Extended Commercial License

Use in unlimited applications
Sell your applications an unlimited number of times (e.g. a website template sold on a theme store)*
Your code is kept proprietary, to yourself
Free updates to the major version

*With the exception of applications that allow end users to produce separate applications. See the OEM Commercial License.

Purchase | Read full license

OEM Commercial License

Should your application enable end users to produce separate applications that incorporate Ian Lunn Design Limited's software, for example, a development toolkit, library, or application builder, you must obtain an OEM Commercial License. Please contact us for more information about the OEM Commercial License.

MIT License (Pre v2.2.0 / 24th March 2017)

Hover.css was previously made available under a MIT License for both commercial and non-commercial use. Anyone that obtained a MIT license for commercial use before v2.2.0 (24th March 2017) may continue to use Hover.css versions prior to v2.2.0 under that same license.

If you'd like to upgrade to v2.2.0 or above, or would like to simply show your support for Hover.css (we'd much appreciate it!), please purchase an up-to-date commercial license. Purchase a Commercial License.

Hire Ian Lunn

Ian Lunn is a Freelance Front-end Developer and author of CSS3 Foundations.

Hire Ian for responsive websites, WordPress websites, JavaScript, animation, and optimization.

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of animate.css

Cons of animate.css

Code Comparison

Pros of Magic

Cons of Magic

Code Comparison

Pros of Hamburgers

Cons of Hamburgers

Code Comparison

Pros of anime

Cons of anime

Code Comparison

Pros of Choreographer-js

Cons of Choreographer-js

Code Comparison

Convert designs to code with AI

README

Hover.css

Contents

Download/Install

How To Use

A. Copy and Paste an Effect

B. Reference Hover.css

A Note on the display Property

Using Icon Effects

What's Included?

css

scss/less

Other

Browser Support

Using Grunt for Development

Using Sass/LESS for Development

_hacks

_mixins

_options

Contribute to Hover.css

Licenses

Personal/Open Source

Commercial

Commercial License

Extended Commercial License

OEM Commercial License

MIT License (Pre v2.2.0 / 24th March 2017)

Hire Ian Lunn

Top Related Projects

Convert designs to code with AI

NPM DownloadsLast 30 Days

A Note on the `display` Property