There are over 100 effects to choose from, including 2D transsitions, background transitions, border transitions, icon buttons, shadow and glow transitions, speech bubbles, and page curls.
hover.css is a stylesheet containing many different classes, each offering a different hover effect. If you’re comfortable with using CSS, then you most likely can jump straight in to using hover.css without the following tutorial. If that’s the case, you may like to skip further down into the article where I discuss some of the default CSS and hacks used to improve the appearance of hover.css effects — especially on mobile/tablet devices, browser support, SASS/LESS support and Grunt support.
To begin, download hover.css, or fork/pull the GitHub repo if you prefer.
Inside the download file you’ll find all of the contents that make up the hover.css demo.
Note: In the download file, you’ll find both a
hover.css file and
hover-min.css. The latter is a minifed version, which is smaller in size and quicker to download. Minified files are difficult to read so to follow the tutorial, use the
hover.css file. Once you’ve completed the tutorial you can then switch to
hover-min.css, which I explain in Good Practices.
Adding hover.css Effects to your Web Page
Link hover.css to your web page using the following HTML, placed within the
<link href="css/hover.css" rel="stylesheet" media="all">
Applying hover.css Effects to an Element
Let’s assume the web page you linked hover.css to has a button on it, made up of the following HTML:
<a href="#" class="button">Checkout</a>
And it currently has this CSS applied to it via the
The button has a nice colour but it isn’t that interesting or enticing for the user! You can make the button much more appealing with a hover.css effect. Let’s apply the Float effect from hover.css.
hover.css file, search for the Float effect.
Note: Each effect has a comment above it with its name, such as
/* Float */. An effect’s class name is a lower case version of its name, prefixed by
hvr-, in this case
.hvr-float (the dot represents a class and the prefix makes the class name a little more unique so it’s not already in use). Where a name has a space in it, such as Grow Rotate, then the space is replaced with a hyphen
-, like so:
The Float effect uses the following CSS:
/* Float */
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
If you don’t understand this CSS, don’t worry (We’ll take a Deeper Look at the CSS later on). All we need do is apply the class of
.hvr-float to the button.
Back in the HTML of the web page, find the button and apply the
hvr-float class to it:
<a href="#" class="button hvr-float">Checkout</a>
The element already had a class of
button, so we added the secondary class of
hvr-floatnext to it, separated by a space.
Now, when you hover over the button, it floats! If you’re not so keen on the Float effect, replace the
hvr-float class for another hover.css effect,
hvr-grow-rotate for example.
Remember to view the demo for a quick sample of all the effects currently available.
That’s all you need do to apply hover.css effects to your elements.
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="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" 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):
padding: 0 1px;
Most important in the above example are the
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):
The Icon Forward effect will then display a musical note that moves forward when hovered over (instead of the default arrow in a circle).
In the tutorial you just completed, you reference one hover.css effect from the entire collection of effects. If you plan on using only a few effects, then it is better practice to copy and paste those effects into your web page’s existing stylesheet. That way, the entire hover.css collection isn’t downloaded when only some of its effects are required — making your website faster to download.
If you choose to reference the complete hover.css collection, then when it’s time to put your web page live, use the minified version of hover.css instead. This makes the file smaller in size so it’s quicker to download. To use this minified version, change your reference from
<link href="css/hover-min.css" rel="stylesheet" media="all">
All hover.cs effects are given default CSS properties that aren’t directly related to the effect. These default properties give the most desired wide-spread results, but nonetheless you may wish to change them on your own website.
display property is often required for an effect to work. By default, hover.css sets all elements to
display: inline-block. You may need to change this to
display: block or
display: inlinedepending on your requirements. If the element you’re applying the effect to already has a
display property, then the one applied by the effect can be removed.
transform: translateZ(0) is known as a “performance hack”. It is often used with CSS3 transforms to improve the performance of those transforms on mobile and tablet devices.
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
When viewing CSS3 transformed elements on mobile/tablet devices, the edges can sometimes look jagged or a slightly different colour. By applying
box-shadow: 0 0 1px rgba(0, 0, 0, 0), an element is given a transparent box shadow, which causes the edges of that element to look smoother.
Many hover.css effects rely on CSS3 features such as transitions, animations, transforms and pseudo-elements. Older browsers still in use today may not fully support effects making use of these technologies.
- Transforms are not supported below Internet Explorer 10
- Transitions and Animations are not supported below Internet Explorer 9
- Psuedo-elements are 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.
hover.css also comes in SASS and LESS flavours, which allows for greater control of its effects, as well as quicker production.
hover.css file is generated using SASS/LESS Mixins. Each effect is a Mixin so you can add them to your own project quicker. Find them in
less directory, you’ll find an
_options.less file which will allow you to specify many default properties such as the default duration for transitions/animations, primary, secondary, and shadow colours, width and heights for speech bubbles, and so on.