Image Hover Effect using CSS

Add This To Del.icio.us StumbleUpon This Add to Technorati Digg This

Login To Blogger Go To > Design > Edit HTML.

and mark the tick box "Expand Widget Templates"

Then, 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEKEsHQjWO8q1SPCdGUfKWVb3UoKfaDH4Xz8_BjJhsmucSv5XE__oOHcufqSzDXArWFlHKTA-LXtlgTO8iZb5AJPIqQVidBVpN33vQRGQkh6dn8AODR2YKgbnGOQ0udYRldgmNTBLTy_5s/s1600/fgdf.jpg"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEKEsHQjWO8q1SPCdGUfKWVb3UoKfaDH4Xz8_BjJhsmucSv5XE__oOHcufqSzDXArWFlHKTA-LXtlgTO8iZb5AJPIqQVidBVpN33vQRGQkh6dn8AODR2YKgbnGOQ0udYRldgmNTBLTy_5s/s320/fgdf.jpg" width="320" /></a>

But, to use the hover effect, you need to add the class as shown below:

<a class="hovereffect" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEKEsHQjWO8q1SPCdGUfKWVb3UoKfaDH4Xz8_BjJhsmucSv5XE__oOHcufqSzDXArWFlHKTA-LXtlgTO8iZb5AJPIqQVidBVpN33vQRGQkh6dn8AODR2YKgbnGOQ0udYRldgmNTBLTy_5s/s1600/fgdf.jpg"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEKEsHQjWO8q1SPCdGUfKWVb3UoKfaDH4Xz8_BjJhsmucSv5XE__oOHcufqSzDXArWFlHKTA-LXtlgTO8iZb5AJPIqQVidBVpN33vQRGQkh6dn8AODR2YKgbnGOQ0udYRldgmNTBLTy_5s/s320/fgdf.jpg" width="320" /></a>