Here’s a nice tip that I wanted to put on my blog. This is called, “CSS Tip: CSS Image Hover Opacity Effect”.

I use this for quick mouseovers when I am to lazy to actually create it in Photoshop.

CSS Code [This goes above (/head)]:

<style type="text/css">

.toggleopacity img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
}

.toggleopacity:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}

</style>

HTML Code [Where You Want This Effect On]:

<a class="toggleopacity" href="LINK FOR IMAGE">
<img src="IMAGE URL" border="0" />
</a>

Comment, if you have any problems with the script.