Skyrocket Your Blog Traffic!
Join our newsletter to get guides which will help you boost your blog traffic for free!



Basic Hover Effects Which Must Be Known By Every Blogger

Nitishk Gupta 9/23/2015 2 Comments
Basic Hover Effects

Hello And We Are On With Our First Post Which is a must read post by every newbie and blogger.
Many times you must have wanted to renovate you blog template but due to lack of html and Css language you must have go down so therefore i created this post for you where you can learn basic hover effects which will work forever for your blog.So are you ready! Let's Start-



What Are Hover Effects?

The term hover means when someone brings his cursor on any class and combining Hover Effect means the effect which comes when someone hover's any class.It might be difficult for newbie's to understand this so i suggest you to read this post as many times until you understand it.I Hope now you must have understand what does Hover Effect Means?

What Are Classes?

Hey Classes here don't mean the school ones! ( I Was Joking ! ) , classes here means the the identity which is given to each element in html or any other language Just like the identity card given to each student in a school!

For example-

<div class='abc'>This is text in a class</div>
Here abc is the class given to div (division) which will help us to add many effects including hover,after,before,focus,active etc. but i will explain only hover effect in this post.
So now we will use abc class to add hover effects on the division.

Note-The classes can also be added in any other parent element like <a> , <h1> , <font> etc.
Note- The classes are case sensitive!

The :hover Pseudo Element-

All the hover effects in html are given by :hover pseudo element.If you can't understand pseudo then google is there for you!

Using :hover Pseudo Element-

As stated above that hover effects are given by :hover element therefore now we will use it to define our hover effects to class abc.

Example-
In this example i will show you how can you change the color of text in the division when someone hover's the division.


<style>
.abc:hover {color:green;}
</style>
Now when we will hover on the div with class abc the text color will change to green.

Live demo-


Hover Me to See the change in text color!


Did you notice any change? If Yes Then our hover effect worked.

Similarly you can add other hover effects like-

Effect                                                                                                          Explaination

1- background                                                                                Change the background Of Class

2- text-shadow                                                                            Add text shadow to the text of class

3- border                                                                                   Add border to class in the class

5- text-decoration                                                              Add Text Decoration Like Underline Etc.

6- Opacity                                                                        Change The Opacity Of Text Or Image


So these were some important hover effects which must be known by you.There are many other hover effects but i have not discussed them as they are not important then these are are difficult to understand.

What Do You Think?

So these were the basic hover effects which must be known by every blogger. BTW do you think i missed any other important one? if yes tell me through comments and do share it :)




Join Our Newsletter!

Join our newsletter to get regular updates with secret tips/tricks to skyrocket your blog rankings!

Nitishk Gupta
Hi, I Am Nitishk Gupta, a blogger and web developer. I am an addicted blogger who wants to share each and everything I have learned so far in my 4 years journey. Feel free to send me friend request or follow me. Thanks!

2 comments:

  1. Thanks for sharing it .very nice info shared by you.
    Mcx Trading Tips

    ReplyDelete
    Replies
    1. Your Welcome :) Keep Coming Here For More Great Posts :))

      Delete

Powered by Blogger.