Image Opacity / Transparency in CSS

First we will show you how to create a transparent image with CSS.

Regular image:

The same image with transparency:

Look at the following CSS:
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

IE9, Firefox, Chrome, Opera, and Safari use the property opacity for transparency. The opacity property can take a value from 0.0 - 1.0. A lower value makes the element more transparent.

IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 - 100. A lower value makes the element more transparent.

---

Example 2 - Image Transparency - Hover Effect

Mouse over the images:
pic
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
pic:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}