hover.css Tutorial and Introduction
Updates
-
Updated tutorial for version 2 release of Hover.css. Includes over 100 effects, LESS support, and prefixes all effect names with
hvr-. If you're using Hover.css v1, you can omit thehvr-prefix.
hover.css is a collection of CSS3 hover effects that can be easily applied to your own website's elements, such as links, buttons, logos, SVG, and featured images. Available in CSS, SASS, and LESS.
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.
How to Use
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 <head></head> tags:
<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 button class:
.button {
display: inline-block;
padding: 1em;
background-color: #79BD9A;
text-decoration: none;
color: white;
}
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.
In the 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: .hvr-grow-rotate.
The Float effect uses the following CSS:
/* Float */
.hvr-float {
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;
transition-timing-function: ease-out;
}
.hvr-float:hover,
.hvr-float:focus,
.hvr-float:active {
transform: translateY(-8px);
}
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-float next 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.
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="//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):
.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;
}
Most 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).
Good Practices
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 hover.css to hover-min.css:
<link href="css/hover-min.css" rel="stylesheet" media="all">
A Deeper Look at the CSS (and some Hacks)
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: inline-block
A 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)
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.
Browser Support
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.
SASS/LESS Support
hover.css also comes in SASS and LESS flavours, which allows for greater control of its effects, as well as quicker production.
The 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 scss/effects and less/effects.
In the scss and less directory, you'll find an _options.scss or _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.
Grunt Support
With the project downloaded, in your command line run grunt for a production environment that includes SASS/LESS, CSS minification, watch, and connect tasks. The connect server can be accessed at http://127.0.0.1:8000.
Conclusion
hover.css aims to be as simple as possible to apply unique effects to your own web pages. Use it on links, buttons, logos, SVG, featured images and other elements to really draw attention to them.
Watch hover.css on GitHub for the latest updates and newest effects.
Ian Lunn is a Front-end Developer with 12 years commercial experience, author of CSS3 Foundations, and graduate of Internet Technology. He creates successful websites that are fast, easy to use, and built with best practices.