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.

  • By Ian Lunn
  • Last update: Jan 9, 2023
  • Comments: 14


Buy Me A Coffee

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:
	<link href="css/hover-min.css" rel="stylesheet">

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");
  1. 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>

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" />

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

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

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 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 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:
@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.


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.




  • 1

    2D transforms not working in IE11 / Windows 10

    I put a hover effect on the nav menu on my site and it works in Chrome & FF but not in IE. Just in case it makes a difference, I also have a CSS animation effect on another element, plus a jQuery animation effect which is on the same element as the CSS one, but it's a different element to the one the hover effect is on.

    I tried adding the -ms- prefix to all the transform and animation attributes to all the lines of the hover CSS, so now they all have the basic transform or animation attribute as well as the webkit prefix and the -ms-prefix. I even tried putting them in the correct order (not that it matters) but it's not going.

    Are there any known issues that could be causing this?

  • 2

    Compile with or without classes

    Something like this. What do you think? Would be nice I think. Now people can include the hover.scss file, and compile it without all the classes, and still use the @include for adding an effect.

    Don't know if it's correct for Less.

  • 3

    Scss version doesn't include webkit/moz versions??

    Am I missing something?

    The hover.css version includes the webkit/moz calls, though the scss version doesn't? Is there a scss version I can't see?

    It would be so useful to use includes on elements rather than adding a class in my markup.

  • 4

    problem with addMediaConversion

    when i want to resize an image and use this method addMediaConversion i got this error :

    SQLSTATE[HY000]: General error: 1 no such table: jobs (SQL: insert into "jobs" ("queue", "attempts", "reserved_at", "available_at", "created_at", "payload") values (default, 0, ?, 1562695873, 1562695873, {"displayName":"Spatie\MediaLibrary\Jobs\PerformConversions","job":"Illuminate\Queue\[email protected]","maxTries":null,"delay":null,"timeout":null,"timeoutAt":null,"data":{"commandName":"Spatie\MediaLibrary\Jobs\PerformConversions","command":"O:43:"Spatie\MediaLibrary\Jobs\PerformConversions":9:{s:14:"\u0000*\u0000conversions";O:51:"Spatie\MediaLibrary\Conversion\ConversionCollection":2:{s:8:"\u0000*\u0000media";N;s:8:"\u0000*\u0000items";a:1:{i:0;O:41:"Spatie\MediaLibrary\Conversion\Conversion":7:{s:7:"\u0000*\u0000name";s:5:"thumb";s:28:"\u0000*\u0000extractVideoFrameAtSecond";i:0;s:16:"\u0000*\u0000manipulations";O:26:"Spatie\Image\Manipulations":1:{s:23:"\u0000*\u0000manipulationSequence";O:33:"Spatie\Image\ManipulationSequence":1:{s:9:"\u0000*\u0000groups";a:1:{i:0;a:4:{s:8:"optimize";s:341:"{"Spatie\\ImageOptimizer\\Optimizers\\Jpegoptim":["--strip-all","--all-progressive"],"Spatie\\ImageOptimizer\\Optimizers\\Pngquant":["--

    as i now this problem Because of a table in data base named jobs but should i create one or there is another something related to this problem?

  • 5

    hvr-border-fade issue

    Having a slight issue with hvr-border-fade as it doesn't seem to be on top of the image even tho Im using z-index 1;

    you can see a faint blue shadow round the box but its not on top of the image, any ideas ?

    screen shot 2016-01-28 at 4 08 57 pm
  • 6

    Animation doesn't play after link is clicked.

    I am using the "ripple out" effect for some links. The links are set to open in a new window/tab. What is happening is that after someone clicks the link, a new tab is opened, but if you go back to the original page, the animation no longer plays for the link you just clicked on, until you refresh the page.

    How can I fix that, so that the animation always plays?

  • 7

    hvr-grow hover.

    Hello, I have a question about this element, more precise about aligning. I have a series of elements who are forming a circle in mine div, this is the example http://dabblet.com/gist/3864650. I want to use grow hover on all buttons, and I have done all the tutorial said, been using hover-min.css, but when I use it, the property align all icons in the middle, I have tried and put 'vertical-align:none' but that did not do the trick. How can I over come this. Tank you.

  • 8

    Add back pulse animation

    Hi there,

    I'm new here but I'm interested in what you're doing and thought I could add a little bit to it. Let me know what you think, it's a pulse animation but to the background instead of the growing and shrinking pulse that you already have.

  • 9

    Alphabetization of properties

    I've alphabetized properties for all classes in hover.css and demo-page.css. I've also updated hover-min to reflect the changes that I made to hover.css.

  • 10

    Unneeded transform: translateZ property removes support for IE11.

    It seems like some styles, like hvr-grow, are using transform: translateZ(0) which is causing issues in IE11. Removing these lines makes it work perfectly. Perhaps they can be removed for styles that do not require them?


  • 11

    Float shadow looped animation bug

    If cursor is just on the edge of the element then element will float away and this will cause the backwards movement which will bring the element back under the cursor and that will cause another loop :-)

    See this GIF:


  • 12

    Trying to make sense of the commercial vs. MIT licensing

    Hmm, I thought I know the MIT license rather well, and a quick glance at your "personal" license tells me that you basically use an "unmodified" MIT license that perfectly allows commercial usage.

    As the MIT license also allows to use your code in closed source applications ("including without limitation the rights to (...) sublicense (...) the Software"), why do you even have a commercial license?

  • 13

    Hover issue on "hvr-bounce-to-right" animation with border and border-radius properties


    I am using this hover.css for most of my projects. Recently, I came across an issue. When I use "hvr-bounce-to-right" animation with border and border-radius properties, it shows some white space inside the button even though it shouldn't.

    Can someone help me fix this?


  • 14

    [Documentation] More explanations for some of the effects?

    Hey there Ian,

    I know the project is in low maintenance mode, but if you ever get to polish it up again at some point in the future, could you add some more explanations about some of the CSS effects?

    This does not necessarily need to be in the main README file; it is ok to add it elsewhere, be it on the wiki, or examples/ or doc/ - and link to that from the main README.

    Specifically - which explains the use case of this issue - I am wondering about the "rotate" effect. Right now it tilts a bit to the right. I wonder if it is possible to change it to the left. I assume so (I haven't looked at the CSS yet), but I sometimes make mistakes, so having a short one-liner example to demonstrate how to tilt to the left, would be useful, IMO. That's just one example I can think of right now, perhaps some more effects (the non-trivial ones) need more examples. Most effects such as grow and shrink are super easy to understand.