Change Opacity - Image Hover Effect

Change Opacity - Image Hover Effect

This is one of the most common and popular image hover effects, you would have seen on many blogs, including a number of pro-blogs too. Simply hover your mouse cursor on these images:


The hack is very simple, a small CSS code changes the opacity level of the images, whenever you place the mouse cursor over these images.

To add this effect to the images in your blog, follow these steps;

STEP1:
Log in to Blogger, go to Layout -> Edit HTML,
Find (CTRL+F)




STEP2:
And right before that tag, paste this code:






STEP3:
Save the template.

STEP4:
Now whenever you want to show this effect to any of your images (whether in any post or in the sidebar), you have to modify the linking code like this:

Normally the code you use, to link any image will look like this:




If you want to add the hover effect to the image, then add this simple code (in BOLD) to it, like this:



To show exactly the same buttons as displayed above, or in the "Connect with me" widget in the sidebar, use this code:

Get this widget


My Creative Readers:
Check out the best examples of this tutorial:
1. Buttons on a dark background - At Danoxs.BlogSpot.com by Danoxs