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.

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

and place the below code just above </head>

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

now you need to add the class for opacity

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!

PinExt Image Hover Effect In Blogger using CSS

Comments
Trackbacks

19 Comments

Venksh

05.06.2009


hey thankx for the image hover effect… its really awesome….

venkateshkumar
http://kollywoodmoviereview.blogspot.com/
Sudha

05.06.2009


Hey this looks great chetz.. you remember you helped me to install wordpress style animated label cloud in my blog.. I saw that hack in ur blog and was crazy of that label cloud like that I want this one also for my blog
anshul

05.06.2009


good work !!!
DesiHotMasala

05.07.2009


is this tested on all browsers ?
Anonymous

05.07.2009


sweet it works thanks for the tweak
techknowl

05.31.2009


Good post .With your permission can I add this tutorial (In a modified form ) with link back?? Btw cheth , How you manged to arrange the images ad shown above ?? I arranged a bunch of images and each time it slips out when published ~x( .
cheth

05.31.2009


You can say it looks arranged because of the template coding “image alignment” try playing with it and it will set perfectly. PS: you need to have images of same size.

Feel free to repost this tut.
Anonymous

07.07.2009


)
Hendriono

07.16.2009


Thanks for your tuts, keep writing friend…
Raju

08.12.2009


Any fix for I.E.? Border is appearing and it looks bad. x(
cheth

08.12.2009


@Raju : the border appears only on my blog because I've set it like that.. the tutorial codes doesn't have border..
Raju

08.12.2009


Sorry but it's in my blog that appears
cheth

08.12.2009


your blog is showing that in IE because your template is not optimised for IE6 png transparency. Fix that issue and it will be fine on IE
Anonymous

08.14.2009


where can i find this " template coding "image alignment" ??

I need to make it look orderly such as the example shown above.
Blogger

08.14.2009


actually never mind the previous post asking for alignment of images. I can do it now!!! thanks heaps!!!
Sid

10.08.2009


Hey,
nice tweak. Liked it!!
Earl

07.04.2010


Is there a similar hack in which the image is converted into greyscale and should colorize on mouse hover? Thanks.
Toyin

09.09.2010


How do I make my icons to 'sink' and then come out fully when hovered over?
Sheena

12.29.2010


Thank you so much for this! Works perfectly!

There are no trackbacks to display at this time.