Add Opacity Effect To Any Social Icon

Opacity Effect

Adding Opacity Effect to any image or social icon is good and easy as compare to other things. It just become bright when you hover the mouse on them. Hover the mouse on the below Twitter Icon to See Live Example of Opacity Effect on Social Icon.

It looks nice, You can also add a delay in this effect like the example below, Hover the mouse on below example to see the opacity effect with a delay of 1 second.

Both looks nice, It's your decision that which you want to use. Let's start with the simple one.
The image that I am using is given below.

It's a dark red twitter icon.

Step 1: Get any image or any social icon.

Step 2: Upload your image to any site and get it's image url.

Step 3: Now place your image link in the code below.

.twitteropacity {
background:url('IMAGE LINK');
width:86px;
height:71px;
display:inline-block;
margin:3px;
opacity:0.5;
cursor:pointer;
}
.twitteropacity:hover {
opacity:1;
}

Step 4: After placing your image link in the above code, Now you have to put the Width & Height of your image. My Image's width is 86px and height is 71px, That's why I have used 86 as width and 71 as height. You have to replace it with your image's width and height.

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="twitteropacity" href="LINK HERE"></a>

Step 5: Replace LINK HERE with the link of your social media account.

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

Why this CSS Code is giving a nice opacity effect?
Carefully see the CSS code, You will see opacity:0.5; and on the hover part, You will see opacity:1.
It tells that when the mouse is not over the image the opacity of the image will be 0.5, Default opacity is always 1, And when the mouse will come over the image, It will go to it's default opacity that is 1.


Opacity Effect With Delay
To add a delay in your opacity effect, Add the following code in your CSS Code.

-webkit-transition: opacity 1s ease;
-o-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
transition: opacity 1s ease;

And Your CSS Code with become like this

.twitteropacity {
background:url('IMAGE LINK');
width:86px;
height:71px;
display:inline-block;
margin:3px;
opacity:0.5;
-webkit-transition: opacity 1s ease;
-o-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
transition: opacity 1s ease;
cursor:pointer;
}
.twitteropacity:hover {
opacity:1;
}

The Html Code will remain same.

I hope you guys understand that how you can simply add opacity effects to your Images/Social Icons and make them look beautiful.