CSS Hover Effects

Today I am going to tell you how to use effects on cursor hover / mouse over or we can say that how to use hover.css. It is very easy process to use in your website. It is commonly used in latest websites in nav-bar, Important-text and buttons. We just need to download a single file and link it with your website so that u can use its features by hovering on text on button or div. it is a file made or provided by github but a few people know about it that’s why all spend so much time to write the code for a single effect. But by using this file u just need to attach it with your website in backend and add a simple class to use it.

Steps to use hover.css:

1)      Download this file

2)  Link css file with your website. For example: [<link rel="stylesheet" type="text/css" href="hover-min.css"> ].

3)      Now choose the class on which you want to use the hover effect and write  class=”hvr-*-*” Note: * refers to the name of effect. For Example: [ <div class="hvr-wobble-top" style="padding:10px; background:rgba(0,0,0,0.5);"><p>Text</p></div> ].

4)      That’s it you have done with now enjoy the beautiful animations.

To see more effects open index.html file with the file u have downloaded before.

But if you want to edit something in the effect like its background, color, margin, padding or anything else you just give a custom class to it and write your own properties and save it and run. In case if any of property does not work then use !important  after the property.

For example normally we write the code like this:

.custom-class{

            background:red;

}

But in case if it is not working because the hover.css is external file using transitions and important grounds you have to add this to overcome hover.css.

.custom-classs{

            background:red!important;

}

For more understanding watch this video How to add css hover effects