Add Hover Over Effect To Any Social Icon

Add Slide Effect To Any Social Icon With CSS

If you have no idea about what I am talking about. See the live example below. Hover the mouse on twitter icon and see what happens.

It looks nice, Isn't It?.
Today i will tell you how to add this effect to any social icon. There Is one more way to Display A image on hover through HTML. But it requires two images and it is slow as compared  to this method.
The Image That i am using for this tutorial is

You can see that one of the image is colored and one is not colored. As shown in the example above, When you will hover mouse on the Grey image, it will slide to show the colored image.

If you do not want slide like the example below:

If you do not want slide, and you only want to display like the above example, I will tell you that way too. Let's Start.

Step 1: First Get any image (Social Icon), and place the colored one at the upper side, and the grey one at down side. You can also place the grey one up and colored one down. But i'm using Grey one down in this tutorial that why i am saying, so that you can better understand it.
Note: You Should keep both (Colored and Grey One) Width & Height same. You can create it in Photoshop.

Step 2: After Creating the image in Photoshop, Make sure You have equal width and height for both images. Then upload it to any site and get the IMAGE URL.

Step 3: Now you have to place your Image Link in the code Below.

.twittersocialicon {
background:url('PLACE IMAGE LINK HERE') bottom;
width:86px;
height:69px;
display:inline-block;
margin:3px;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
-ms-transition: all ease 0.5s;
transition: all ease 0.5s;
cursor:pointer;
}
.twittersocialicon:hover {
background-position:0 0;
}

My each image Width=86px & Height=69px. As you can see in code, That's why i have used WIDTH=86px and Height=69px. If your images width is 100 for example, You can replace the width with 100 and same for height.

This Code is for the images that will slide. If you want to add it in Blogger.
Go to Template, Click on Edit Html, And paste the code just above the ]]></b:skin>.
To Add In Wordpress, Add the code in your theme stylesheet.

HTML CODE

<a class="twittersocialicon" href="LINK OF YOUR TWITTER"></a>

Step 4: You can add that Html Code in your blog posts, or in your HTML Template or HTML Gadget.


Why Image is sliding?
The image is sliding, because we have added Transition effects in the code, If you don't know about Transition effect. Search on Google and you will come to know about the magic of Transition.


Simple Hover Image
Simple Hover Image, that i showed you in the second example above, It will not Rollover. It will simply Change it colors immediately.
You can get Simple Hover just by removing these transition lines below from the CSS.

-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
-ms-transition: all ease 0.5s;
transition: all ease 0.5s;

And the Code will look like this:

.twittersocialicon {
background:url('http://1.bp.blogspot.com/-bYV7TuD0kko/UpBSKMJb8qI/AAAAAAAAA_0/GpLHwrbYbGQ/s1600/Twitter-MYBN-TUT.png') bottom;
width:86px;
height:69px;
display:inline-block;
margin:3px;
cursor:pointer;
}
.twittersocialicon:hover {
background-position:0 0;
}

It will not slide, It will simply change it's color.


I hope you learned that how you can add hover effect to any Social Icon.
In this tutorial i use the single image, which only have Twitter Icons, You can use multiple images in a single image, like next to the Colored Twitter Icon there will be a colored Facebook icon. But To do this you have to make all the images width and size equal and margin between them too.
Then you can just use background-position to Display Them.
I will soon write a topic on CSS Offsets ( background-positioning ).