How to Add Image Hover Effect In Blogger

Mostly people like Image Hover Effects or want to add this in Blogger post images , now you can manually set your picture which was you want to add with this effect . with this effect when mouse out from image your image was see blur or some transparent or if you want to see the image move your mouse on image you picture was see clear .

If You want to add Image Hover Effect in your blogger post images then follow some very easy step .

How to Add Image Hover Effect In Blogger  ?

1. Go to Blogger > Template .

2. Backup Your template .

3. Click On Edit HTML butoon .

4. Find ( Ctrl+F ) this :

]]></b:skin>

 5. Paste this code before it :

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

6. Click on save template .

Now whenever you want to add this effect in you image simply add this code in you image HTML code :
class="opacity"
when ever you upload a pic after that go on HTML ur image HTML code is like this :

<a href="http://www.thetricksfree.com" ><img src="/imageeffect-thetricksfree_com.png" /></a>

add  class="opacity" this code in it like :

<a href="http://www.thetricksfree.com" class="opacity"><img src="/imageeffect-thetricksfree_com.png" /></a>

Done !!
If you have any question . please comment :]

Tag : how to , how to blogger , how to blogspot , add image hoven effect in blog post ,  add image hoven effect in blogger , image hover effect in blogger , blogger , blogspot , effect in blogger , image effect in blogger .