1. To achieve this effect, we just add some opacity filters within our image element. Here’s the code:

<img src=”image.gif”
style=”opacity:0.5;filter:alpha(opacity=50)”
onmouseover=”this.style.opacity=1;this.filters.alpha.opacity=100”
onmouseout=”this.style.opacity=0.5;this.filters.alpha.opacity=50”
alt=”image” />

2.opacity:0.5 and opacity=0.5 dictate how the filter will affect an image seen in Firefox. The value can be anywhere from 0 to 1. the lower the decimal, the more transparent it will be.filter:alpha(opacity=50) Dictates how the filter will affect an image seen in Internet Explorer.
3.This value can be anywhere from 0 to 100. The lower the number, the more transparent it will be. I suggest keeping the ratio between the Firefox & Internet Explorer filter the same so that it looks the same regardless of your visitor’s browser. (ex. if the firefox one is 0.4, make the IE one 40. if the firefox one is 0.75, make the IE one 75)
4.The properties that follow “style” are the same as the ones that follow “onmouseout” because we want the image to have the same transparency levels before & after we’ve hovered our mouse over the image.
5.If you want the image to always have partial transparency regardless of whether or not we’ve hovered over the image, we just take the “onmouseover” and “onmouseout” information out of the HTML code:

<img src=”image.gif”
style=”opacity:0.5;filter:alpha(opacity=50)”
alt=”image” />