Easy CSS3 Animation with Hover.css

hover

CSS3 allows you to add animation to elements such as links. In a previous post about the OSTraining redesign, we showed how CSS3 enabled us to add a small bounce animation to some buttons on our site.

In this tutorial, we’ll introduce you to Hover.css, a library by Ian Lunn that makes it really easy to animate hover elements on your site.

Step 1: Download hover.css

fullscreen.js
  • Decompress the zip file.
  • Find this folder: /hover-master/css/hover.css
  • Upload the file hover.css file to your website.

Step 2: Load hover.css

Inside any HTML file, add the following code just before the closing head tag:

{codecitation}<link href=”path/to/hover.css” rel=”stylesheet” media=”all”>{/codecitation}

Step 3: animation effects

Hover.css includes a long list of animation effects including 2D transformations, border transitions, shadow and glow transitions, speech bubbles and curls.

Let’s see how to use a few of them by adding a specific class to the <a> tag:

Class grow

{codecitation}<a class=”grow” href=”#”>Grow this link</a>{/codecitation}

Class pulse

{codecitation}<a class=”pulse” href=”#”>Pulse this link</a>{/codecitation}

Class float

{codecitation}<a class=”float” href=”#”>Float this link</a>{/codecitation}

Class outline-outward

{codecitation}<a class=”outline-outward” href=”#”>Outline outward this link</a>{/codecitation}

Class float-shadow

{codecitation}<a class=”float-shadow” href=”#”>Float shadow this link</a>{/codecitation}

You can see live examples of these animations by clicking this demo below:

The full list of animation effects is available here.

Instructor

  • Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

0 0 votes
Blog Rating
Subscribe
Notify of
5 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
UMESH SHEJOLE

superb……

Nick

Thanks Umesh!

Max

it’s not working for me

daniel-pickering

Hi Max,
Can you explain what you did so far? If so we can try and figure out why it is not working for you.
Thanks,

Daniel

Ali

i followed the instructions.. not working i am using asp.net 

5
0
Would love your thoughts, please comment.x
()
x