1.Log in to your dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> Tag

3.Copy and Paste below CSS code above </head> Tag

<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>

4.Now Click on "Save Templates"

Now whenever you embed your image in blog or blog posts you use codes like below.

<a href="target URL of your image" target="_blank" alt="Any name you like"><img src="Link of your image"/></a>

Look at the Example below.

<a href="http://bloggertipandtrick.blogspot.com" target="_blank" alt="Blogger Tips"><img src="http://i626.photobucket.com/albums/tt346/wam8387/toyotacar-2.jpg"/></a>

5.Replace above code with below code to have hover effect..

<a class="linkopacity" href="target URL of your image" target="_blank" alt="Any name you like"><img src="Link of your image"/></a>

It will look like this.

<a class="linkopacity" href="http://bloggertipandtrick.blogspot.com" target="_blank" alt="Blogger Tips"><img src="http://i626.photobucket.com/albums/tt346/wam8387/toyotacar-2.jpg"/></a>