CSS Image Opacity / Transparency

Note: The CSS opacity property is a part of the W3C CSS3 recommendation.

Creating transparent images - Hover effect

Creating a transparent box with text on a background image

Example 1 - Creating a Transparent Image

The CSS3 property for transparency is opacity.

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:

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:

The CSS looks like this:

The first CSS block is similar to the code in Example 1. In addition, we have added what should happen when a user hover over one of the images. In this case we want the image to NOT be transparent when the user hover over it.

The CSS for this is: opacity=1.

IE8 and earlier: filter:alpha(opacity=100).

When the mouse pointer moves away from the image, the image will be transparent again.

Example 3 - Text in Transparent Box

The source code looks like this:

First, we create a div element (class="background") with a fixed height and width, a background image, and a border. Then we create a smaller div (class="transbox") inside the first div element. The "transbox" div have a fixed width, a background color, and a border - and it is transparent. Inside the transparent div, we add some text inside a p element.