Image Hover Effect In Blogger using CSS

Ok lets face the truth wordpress has built in plugins to do this trick or maybe a little tweak in the theme CSS can help you achive the hover effect. So Blogspot users I'm back with another neat and easy blogger tweak for you.

If You're unaware of Image hover effect, then its an effect which brightens an image when mouse pointer is pointed on it. You can check out the demo images below I'm using.



OK love it right? ;) yea as I said its pretty easy hack. So lets start with the coding.

First of all I would like to say PLEASE BACKUP your template. Slight errors can bring bx-errors.

Login into your Blogger Dashboard > Blogger LAYOUT > Edit Html >

Press Press Ctrl+F to open search and search for </head>

and place the below code just above </head>

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

Yup, now you have to save your template. :)
No its not done yet! Remember the very next time you want to use this effect you have to add class="linkopacity"

For example:

earlier you used

<a href="http://chethstudios.blogspot.com/2009/04/designers-digest-resources-and.html" target="_blank"><img style="width: 50px; height: 35px;" alt="chethstudios" src="http://sites.google.com/site/thumbnailssmall/Home/watchmen.jpg?attredirects=0" /></a>

now you need to add the class for opacity

<a alt="Blogger Widget" class="linkopacity" href="http://chethstudios.blogspot.com/2009/04/designers-digest-resources-and.html" target="_blank"><img style="width: 50px; height: 35px;" alt="chethstudios" src="http://sites.google.com/site/thumbnailssmall/Home/watchmen.jpg?attredirects=0" /></a>

Compare both the codes and you will know what class I'm speaking of :) If in case you have any problem using this little trick feel free to comment here. THe Credits go to blogger stop Enjoy! I will be back soon with a nice tweak, helping you build a better blogger blog! :)