12 November 2010

How to Add Opacity Effect to Images in Blogger Blogs?

Advertisements

You have seen opacity effect for images on many websites. Let's add this to your blog.

This is Demo Image for Opacity Effect
1. Login to Blogger Dashboard. Go to Design >> Edit HTML and look for </head>

2. Add following CSS code just ABOVE </head>

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

You can change values like 70 and 0.7. As this value increases the opacity decreases. Now SAVE your template.

3. For image to which you want to add opacity effect, you have to add class="opacity" as follows:

Following is the normal image code.

<a href="http://www.blogger-help.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/_tbHfaj1A058/TN48j4ns4zI/AAAAAAAALyw/7abV-kYNYCs/s1600/Add+Opacity+Effect+to+Images+in+Blogger.JPG" /></a></div>

Now add class="opacity" between <a and href=

<a class="opacity" href="http://www.blogger-help.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/_tbHfaj1A058/TN48j4ns4zI/AAAAAAAALyw/7abV-kYNYCs/s1600/Add+Opacity+Effect+to+Images+in+Blogger.JPG" /></a></div>

That's it.

Related Posts

2 comments

November 13, 2010 at 9:05 PM

it's wonderful! thnks

November 25, 2010 at 11:34 AM

you are welcome....always :)

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More