Are you happy with your logging solution? Would you help us out by taking a 30-second survey? Click here


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.

Subscribe to updates I use Hover

Statistics on Hover

Number of watchers on Github 18664
Number of open issues 28
Average time to close an issue 3 months
Main language CSS
Average time to merge a PR 5 days
Open pull requests 19+
Closed pull requests 10+
Last commit almost 2 years ago
Repo Created over 5 years ago
Repo Last Updated over 1 year ago
Size 882 KB
Organization / Authorianlunn
Latest Releasev2.1.1
Page Updated
Do you use Hover? Leave a review!
View open issues (28)
View Hover activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating Hover for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)


Join the chat at

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.

Demo | Tutorial


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

  1. Download Hover.css
  2. 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:active {
        transform: scale(1.1);
  3. Copy this effect and then paste it into your own stylesheet.

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

  1. Download hover-min.css
  2. Add hover-min.css to your websites files, in a directory named css for example
  3. Reference hover-min.css in <head> of the HTML page you'd like to add Hover.css effects to: html <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): css @import url("hover-min.css");
  4. 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 FontAwesome with Icon Effects

Hover.css uses FontAwesome for its icon effects. For these effects to work, a reference to the FontAwesome stylesheet must be added by placing the following in the <head></head> of your web page:

<link href="//" rel="stylesheet" media="all">

Hover.css icons are added to elements via the :before pseudo-element. Let's take the Icon Forward effect as an example (browser prefixes and additional styles removed for brevity):

.hvr-icon-forward:before {
    content: "\f138";
    position: absolute;
    right: 1em;
    padding: 0 1px;
    font-family: FontAwesome;
    transform: translateZ(0);
    transition-duration: 0.1s;
    transition-property: transform;
    transition-timing-function: ease-out;

What's important in the above example are the font-family and content declarations. font-family: FontAwesome tells the browser we want to use a FontAwesome icon in this pseudo-element, and the content value says which one. Should you wish to change the icon, change the value of the content property. A full list of the values and the icon they represent can be found here.

If you'd rather not tamper with Hover.css itself, you can override the default content value simply by declaring the same declaration again (providing it be declared after the default one either in Hover.css or another stylesheet):

.hvr-icon-forward:before {
    content: "\f001";

The Icon Forward effect will then display a musical note that moves forward when hovered over (instead of the default arrow in a circle).

What's Included?

The project consists of the following folders and files:


  • 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


  • 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 files of note include:

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.

Aside from the above mentioned browsers, Hover.css is supported across all major browsers. Please see 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 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:


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


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: css @include prefixed(transition-duration, .3s);
  • LESS: css .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.


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.


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


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.

Hover open issues Ask a question     (View All Issues)
  • almost 3 years Feature request: special slider animation
  • over 3 years Add left border reveal and right border reveal
  • over 3 years generator
  • over 3 years "Background Transitions" section buttons are getting stuck in the hovered state
  • almost 4 years Inconsistent text rendering and position
  • about 4 years use a lot more variables in Sass/LESS
  • over 4 years Using Hover Effects with pseudo class :active or on click
  • over 4 years Include keyframes in mixins (scss)
  • over 4 years Decouple FontAwesome?
Hover open pull requests (View All Pulls)
  • Symmetrical buzz effect
  • Adds left and right position values as Less variables.
  • Remove hardcoded color
  • Remove moot `version` property from bower.json
  • Better solution for using icons
  • Added Hover Icon: icon-fade-away, transitions scale: 1x -> 2x
  • Add active class
  • Add spm support
  • Now also available in Stylus
  • No output sass version enabled
  • Added more colors to default colors
  • Changed "Bounce in" to "Bounce out" and viceversa on master branch, they were inverted.
  • Changed "Bounce in" to "Bounce out" and viceversa on the gh-pages branch, they were inverted.
  • feat: Add Table of Contents
  • Move dependency to devDependencies
  • Define entry points in package.json
  • Add CDNJS and npm version badges in
  • Modify browser support
  • Edge bug fix for "From Centre" border transitions
Hover questions on Stackoverflow (View All Questions)
  • Image Map Coordinates Hover with ajax not working
  • CSS Animations - Stopping on hover, and returning to beginning the same way it animated in
  • .focus() not working on textarea in hover event
  • Using CSS, how do you change the color for the hover state on a word that has a couple of letters colored differently?
  • Glyphicon change color when hover a
  • Remove hover effect responsive navbar bootstrap 3.3.6
  • CSS hover menu not showing with overflow: auto
  • I want to show buy now button when hover on image?
  • Simulate Mouse Hover That Follows cursor in Vertical Line
  • How to apply ajax call into hover?
  • Retrieve database data with hover()
  • CSS :hover not work on side bar social media
  • owl slider questioin. Navigation buttons flickers when hover
  • Why doesn't this CSS transition complete it's move hover
  • On hover of a link, have a line run left to right underneath
  • Hover content covering sibling div as well
  • How to darken and add text to images on hover?
  • Swap images on hover with fade
  • How to find CSS deceleration for :hover state using Chrome's inspector
  • Change icon to picture on mouse-hover
  • How do I make additional text appear when you hover over a menu item?
  • Fade translucent overlay text on image when hover
  • jQuery direction-aware hover with CSS3 transition
  • Flicker on hover of element while trying to shrink it's size on the same event
  • Mapbox: How to collapse layer control ON CLICK instead of hover?
  • Disable Zoom effect on Hover for Mobile devices in elevateZoom
  • CSS drop down menu list color does not change on hover in Google chrome
  • Button hover effect and touch (WPF)
  • Tooltip hover not working in IE11
  • CSS Hover change background color on other labels
Hover list of languages used
Other projects in CSS