How Create Image Hover Effect In Blogger

Image hover effect in blogger,as this is very easy trick to be performed and used by many of pro blogers too.When you move your cursor to any of the image the hover effect over it takes place and its view is more clear then before.I love using this hack.Its just small css trick that is done by adding styling to your blog css and define its class while using your image url in blog posts.

How to make image hover over effect.

Log in to Blogger Then Got To

Blogger LAYOUT > Edit Html > Press Ctrl+F

Search For </head>

And place the below css above it

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

Now save the Template.

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

You use green codes like below in your blogs for images.

<a href="http://anshuldudeja.blogspot.com" target="_blank" alt="Blogger Widgets"><img src="http://img2.pict.com/aa/ae/97/16680dfb7c10435cbefea4aa04/4OXiK/geneliadsouzawallpaperspicturesd.jpg"/></a>

Use below blue code in place of above green code to have hover effect.

<a class="linkopacity" href="http://anshuldudeja.blogspot.com" target="_blank" alt="Blogger Widget"><img src="http://img2.pict.com/aa/ae/97/16680dfb7c10435cbefea4aa04/4OXiK/geneliadsouzawallpaperspicturesd.jpg" /></a>


Difference in both codes is just have i ahave added class=linkopacity in red in second code.

For Demo Of Image Hover Effect of two images visit Demo Blogger Widget Blog.