The three images above are all from the same source image. The only difference between them is what is called their "opacity level".

A common use of opacity CSS is when menu items change when a mouse floats over the image as seen below (move your mouse over the images below to see this effect).

There are many different ways image opacity is used on the web, this guide will describe how to change an image opacity level.

Opacity levels

To give an example, here are nine levels of opacity to give you an idea of what level you may need for your needs. The first one is opacity level 10 (0.1), the second is 20 (0.2),and they go up by 10. The last image is opacity level 90 (0.9).

As you can see, the higher the opacity level the more you can see the image. An opacity level of 100 would be the original image as seen with no opacity applied.

How to change the opacity level of a single image.

First we start with an image, lets use the image above and just display it as normal:

No opacity

The above image has no opacity applied to it, it just uses a normal image tag.

<img src="image.png" />

Opacity has levels, which means a numerical value. Different browsers have different ways of dealing with this, but for simplicity let's talk in percentage. The below image is the same image as above, but with 30 percent opacity...

Opacity = 30 (0.3)

The above image has opacity 30 applied to it, and to apply that opacity we have added a "class" to image like so...

<img src="image.png" class="opacity30" />

For this to work we must add that class to our CSS file as well. It looks like this...

.opacity30 {

	filter:alpha(opacity=30);

	-moz-opacity:0.3;

	-khtml-opacity: 0.3;

	opacity: 0.3;

}