In my last two articles I focused on How to use JQuery with WordPress and how to Use the Dollar Sign in WordPress instead of jQuery. These articles gave you jQuery techniques to use with WordPress. Today I am going to show you a super simple, super helpful tool to accomplish some really fancy css3 hover transitions in the websites you build. You won’t believe how simple it is to implement and use!
How To Use CSS3 Hover Transitions
Front-end developer Ian Lunn created a simple css library called hover.css. This file, when either linked to your site in the header or copied into your existing style sheet, automatically gives you the ability to add over 30 different transitions to use on elements in your websites. Once you have the css3 hover transitions linked, choose whichever animation you like best and remember it’s name. Next you add that class name to the element you want to apply it to. In addition, you must always apply the standard “button” class to make the transitions work correctly. Here is an example of the code and how it looks:
<a href="#" class="button buzz-out">EXAMPLE</a>
To see a demo, download the file, or read a full tutorial click here
Why Use CSS3 Hover Transitions?
I Want To See Your Work
These classes look like they were created for hover states on buttons but if harnessed and modified could probably work for other elements as well. I have begun to play with some of these css3 hover transitions in my own work and would be interested in hearing from you guys on how you used them in your projects! Connect with me on one of the above social platforms and tell/show me your fancy projects.