Image Hover Effect using CSS

Instructions To Follow:

STEP #1
Log in to Blogger, go to Layout -> Edit HTML
and mark the tick box "Expand Widget Templates"

STEP #2
Now find (CTRL+F) this code in the template:

]]></b:skin>

And immediately before it, paste this code:

.hovereffect img {

opacity:0.5;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);

-moz-opacity:0.5;

-khtml-opacity:0.5;

}

.hovereffect:hover img {

opacity:1.0;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);

-moz-opacity:1.0;

-khtml-opacity:1;

}
Now click Save Template


To use this effect you have to add class=”hovereffect” to your images.
For example, when you add an image, it generally looks like:

<a href="http://2.bp.blogspot.com/_dzq0x75P67s/S2wcsXRwpCI/AAAAAAAABPg/wS4Guv_TcyQ/s1600-h/hover%20effect%20leaves.jpg"><img border="0" height="240" src="http://2.bp.blogspot.com/_dzq0x75P67s/S2wcsXRwpCI/AAAAAAAABPg/wS4Guv_TcyQ/s320/hover%20effect%20leaves.jpg" width="320" /></a>
But, to use the hover effect, you need to add the class as shown below:

<a class="hovereffect" href="http://2.bp.blogspot.com/_dzq0x75P67s/S2wcsXRwpCI/AAAAAAAABPg/wS4Guv_TcyQ/s1600-h/hover%20effect%20leaves.jpg"><img border="0" height="240" src="http://2.bp.blogspot.com/_dzq0x75P67s/S2wcsXRwpCI/AAAAAAAABPg/wS4Guv_TcyQ/s320/hover%20effect%20leaves.jpg" width="320" /></a