Css3 opacity: transparency of an element in css

The css3 property opacity allows to change the transparency of an element.

The property opacity needs a value in between 0.0 (equal to 100% transparency) and 1.0 (no transparency).

Example for a css transparency of 60%:

opacity: 0.6;

opacity is not supported by Internet Explorer for which we can use the property ‘alpha filter’ implemented by the Microsoft.
This property ‘alpha filter’ needs a value in between 0 (completely transparent) and 100 (no transparency).

Example of the ‘alpha filter’ for a transparency of 60%:

filter: alpha(opacity=60); /*for Internet Explorer 6/7*/
filter: “alpha(opacity=60)”; /*for Internet Explorer 8*/

NB: Internet Explorer 8 requires a Doctype in Strict mode to work

Next, I created a few examples of the property opacity for images, hover effect and text. Attention that for the last example with the text, Internet Explorer requires other parameters to render the effect of transparency properly.

1. Opacity of 50% on a image:

The css rules:

img{
opacity:.50;
filter:alpha(opacity=50);
filter: “alpha(opacity=50)”;
}

2. Opacity of 100% on a image, equal to no transparency, only to demonstrate the effect of the maximum value:

The css rules:

img{
opacity:1;
filter:alpha(opacity=100);
filter: “alpha(opacity=100)”;
}

3. Effect of the opacity from 100 to 40% on the hover state:

The css rules:

a:hover img{
opacity:.40;
filter:alpha(opacity=40);
filter: “alpha(opacity=40)”;
}

4. Effect of the opacity from 40 to 100% on the hover state:

The css rules:

a img{
opacity:.40;
filter:alpha(opacity=40);
filter: “alpha(opacity=40)”;
}
a:hover img{
opacity:1;
filter:alpha(opacity=100);
filter: “alpha(opacity=100)”;
}

5. Difference between a normal text and a text with opacity of 60%:

The css rules:

I impost a font measure of 2em (200%) to better see the effect:

p.opacity{
font-size:2em;

The following to lines are necessary for Internet Explorer…

I impost a width of 100% as Internet Explorer does not apply the effect to a text if a width or height is not specified o also if the text is not positioned such as with the float.

width:100%;

Still for Internet Explorer, I impost a white background. With no background color, the edgess of the text are slightly distorted. Adding a color to the background correct this problem with IE.

background-color: #FFFFFF;

The opacity effect as explained before:

opacity:.60;
filter:alpha(opacity=60);
filter: “alpha(opacity=60)”;
}

The result:

Css property opacity 100

Css property opacity 60

Note: for older browsers version was in use the equivalent css3 ‘-moz-opacity’. Its use is no longer necessary.

Last update: May 2009

Bookmark this css article

css opacity, css transparency, css transparent

25 comments

Stay updated with our RSS Feed