Image Hover effect

 

How to Make an Image hover effect?

First log in to your blogger account

Go to Design> Edit Html

Back up your template first

Now Find this code

]]></b:skin>

Immediately before that paste this code below.

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

Then Save.

Picture Format: Add class="hovereffect"

<a class="hovereffect" href="Image url"><img border="0" height="240" src="Image url" width="320" /></a>

Click for Demo