hover.css Tutorial and Introduction

by

css3foundations-cover

Learn CSS with Ian's book,
CSS3 Foundations

Download Demo

hover.css is a collection of CSS3 hover effects that can be easily applied to your own website’s elements, such as buttons, logos and featured images.

At the time of writing there are over 40 effects to choose from, including 2D transforms, border transitions, shadow and glow transitions, speech bubbles, and page curls.

hover

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 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;
}
An example button prior to adding an hover.css effect

An example button

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, in this case .float (the dot represents a class). Where a name has a space in it, such as Grow Rotate, then the space is replaced with a hyphen -, like so: .grow-rotate.

The Float effect uses the following CSS:

/* Float */

.float {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.float:hover {
  -webkit-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
}

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 .float to the button.

Back in the HTML of the web page, find the button and apply the float class to it:

<a href="#" class="button float">Checkout</a>

The element already had a class of button, so we added the secondary class of 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 float class for another hover.css effect.

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.

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 of 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 Support

hover.css also comes in a SASS flavour, which allows for greater control of its effects, as well as quicker production.

The hover.css file is generated using SASS Mixins. Each effect is a Mixin so you can add them to your own project quicker. Find them in scss > effects.

In the scss directory, you’ll find an _options.scss file which will allow you to specify many default properties such as the default duration for transitions/animations, primary, secondary, and show 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, auto prefixing, 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 buttons, logos, featured images and other elements to really draw attention to them.

Watch hover.css on GitHub for the latest updates and newest effects.

Download Demo

Written by Ian Lunn

is a freelance Front End Developer. He uses the latest web technologies to build creative and effective websites. Creator of Sequence.js and author of CSS3 Foundations.

Available September 2014. Get in Touch.


Comments

Show comments...