Hover effects with Hover.css

#css #html #npm #beginners

Hello Guys today i am going to discuss a library named Hover.css which helps you to give hover effects to your elements by just using the class names.

What is Hover.css?

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.
You dont need to write any css to make those effects it will apply the effect by just writing the class name of that effect in your html element.
Its easy to use
It has many hover effects which can be applied to many elements
You can use these hover effects with javascipt or Reactjs as well.

Installation -

npm install hover.css --save

Example 1 -

  <div className='text-center my-5'>
      <button className='btn btn-outline-dark hvr-shutter-out-horizontal'>
        Click
      </button>
  </div>

Explaination -

I have created a button element, The class name hvr-shutter-out-horizontal will create a shutter effect when you hover over the element.
This is same as using bootstrap in which you provide the styling to the element by just providing the class name of that style.

NOTE - You have to write "hvr-" first then class name of the effect you are using , like for a fade effect we have to write
class="hvr-fade".

Example 2 -

 <div className='text-center my-5'>
      <button className='btn btn-outline-dark hvr-fade'>
        Click
      </button>
 </div>

This time we have give the class name "hvr-fade" and it will give a fade effect when you hover over the element.

Other commont effects classnames are -
hvr-grow
hvr-shrink
hvr-pulse
hvr-bounce-in
hvr-float
hvr-sweep-to-right
hvr-sweep-to-left
hvr-bounce-to-top
hvr-rectangle-in
hvr-rectangle-out
etc....

IMPORTANT -

The link below will take you to hover.css documentation page where you will see all the effects and their name.
All the effects are named Uppercase but you have to write the class names with lowercase and "-".

Example - if the class name written there is -
BOUNCE IN, then you have to write "hvr-bounce-in"
FADE, then you have to write "hvr-fade"
BOUNCE TO TOP, then you have to write "hvr-bounce-to-top"
etc...

SOURCE - https://ianlunn.github.io/Hover/

NOTE - I have used bootstrap in my codes so , use it by providing CDN in your html file or install it via npm.

THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION THEN PLEASE MENTION IT IN THE COMMENT SECTION.