How to Add Opacity Effect to Images in Blogger Blog

Image opacity is actually a simple css code that once installed in your blogger template can be used to create an opacity effect in your images. These images can be in your blog posts or anywhere on your page. This opacity effect creates a nice effect for your images when mouse cursor is hovered over them.

Demo:

simple mage without opacity

Image with opacity effect

To install this image opacity css in you blogger blog , follow the simple procedure:

1. Go to Layout > Edit HTML
2. Find </head> and just ABOVE it copy the following code:


<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>


3. Save the template.

Now when you want to add the opacity effect to your images, all you have to add a class=”linkopacity” in your image code just after starting <a> tag.

To understand let’s take the example of above twitter images.

Simple image without opacity

CODE:
<a href="http://twitter.com/zainali88" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://3.bp.blogspot.com/_L3S3cG5x4ys/S1Y8h8l3P7I/AAAAAAAABZQ/jE7aPSTj8J8/s640/follow-me-on-twitter-big-icon.png" /></a>

Image with opacity effect

CODE:
<a class="linkopacity" href="http://twitter.com/zainali88" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://3.bp.blogspot.com/_L3S3cG5x4ys/S1Y8h8l3P7I/AAAAAAAABZQ/jE7aPSTj8J8/s640/follow-me-on-twitter-big-icon.png" /></a>

If you have any difficulty in installing this, leave the comments below.