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
