Add Opacity/Transparency To An Image Using CSS

Opacity / Transparency are used by many design blogs to differentiate when a mouse over is done. So this post will teach you how to add opacity to image on your blog post and also for static images used in your template. This trick is very simple and easy to implement for both websites and blogs. So, irrelevant of your blogging platform this trick tutorial will help you to add transparency effect.

For Blogger blogs:

Search for ]]></b:skin> and paste the the written code below ]]></b:skin>

a.opacity img {
-moz-opacity: 0.5;
opacity: 0.5;
filter:alpha(opacity=50);
}

a.opacity:hover img {
-moz-opacity: 1.0;
opacity: 1.0;
filter:alpha(opacity=100);
}

Once you are done with this step, add class=”opacity” between the image links using the Edit HTML tab for the post. For an example

Thats it you are done. Check out the live demo for Blogger

For WordPress Blogs:

Go to Appearance > Editor  and add the script you find below in it

a.opacity img {
-moz-opacity: 0.5;
opacity: 0.5;
filter:alpha(opacity=50);
}

a.opacity:hover img {
-moz-opacity: 1.0;
opacity: 1.0;
filter:alpha(opacity=100);
}

Then go to HTML mode in the post editor and follow the same step as I instructed for Blogger.

For websites:

Add the same CSS code and add class="opacity" as instructed for Blogger.

For static image in you template

For an instance, if you are adding opacity effect for static image in a template you can use this script. This script implies to both blogs and websites.

<img src="http://yourdomain.com/image.png" style="opacity:0.5;filter:alpha(opacity=50)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" />

Some times your image source starts with <img src at those case just add <a class="opacity"> and end it with </a> along with the CSS file.

Note: For WordPress blogs give around 4-5 minutes to see the effect.