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.
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:
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.
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):
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 hover.css to hover-min.css:
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.
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) 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.
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.
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.
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.
Ian Lunn is a freelance Web Designer & Front-end Developer. Providing quality user experience through responsive web design and performant front-end development. Creator of open-source projects Sequence.js and Hover.css, and author of CSS3 Foundations.
Front-end Developer, author of CSS3 Foundations, and graduate of Internet Technology. Ian combines his education with 8 years commercial experience in front-end development to produce high-quality websites and exceptional user experience.
Front-end Developer. Available October 2016. Hire Now
Follow @IanLunn for web design & development articles, opinions and links