Make your own free website on


You can create transparency effects in CSS by using the following syntax :

Sets the opacity of the object. 0 = invisible, 100 = completely visible. Sets the start opacity when used in conjunction with FinishOpacity.

Sets the opacity for the end of the of the object. Creates a gradient effect.

StartX=??, StartY=??, FinishX=??, FinishY=??
Sets the coordinates for the opacity to start or end.

Sets the type of gradient. 1 = Horizontal; 2 = Radial; 3 = Rectangular.

NOTE This trick will work only in IE 5.x and above browsers.


1.   Style = 1
2.   Style = 2
3.   Style = 3
4.   image transperancy
  1. <p style="FILTER: alpha(finishopacity=0, style=1);
    WIDTH: 120px; COLOR: #ffffff" align=middle width=120 bgColor=#808080"
    >Style = 1</p>

  2. <p style="FILTER: alpha(finishopacity=0, style=2);
    WIDTH: 120px; COLOR: #ffffff" align=middle width=120 bgColor=#808080"
    >Style = 2</p>

  3. <p style="FILTER: alpha(finishopacity=0, style=3);
    WIDTH: 120px; COLOR: #ffffff" align=middle width=120 bgColor=#808080"
    >Style = 3</p>

  4. <IMG style="FILTER: alpha(finishopacity=0, style=2)" WIDTH="71" HEIGHT="33"
    SRC="../images/trans2.gif" ALT="image transperancy" BORDER="0">

Using this technique and you can add a mouseover effect on an image. The browser is doing all of work so there is no extra download time. This is a great way to make rollover effects without weighing down your page. Here's how.


transperancy mouseover

<IMG onmouseover="this.filters.alpha.opacity='100'" style="FILTER: alpha(opacity=50)"
onmouseout="this.filters.alpha.opacity='50'" WIDTH="90" HEIGHT="33" SRC="../images/trans.gif" ALT="transperancy mouseover" BORDER="0">