Tutorials

Table of contents
Close

CSS Opacity and Transparency

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. An easy way to remember the css opacity property value is by remembering that 1.0 is equal to 100% of the image showing. If you would want 70% of the image to show, you would use a value of 0.70. If you would want 30% of the image to show, you would use a value of 0.30.

In the example below we have created a class called opacity and applied it to all images. Now all images wil have 70% opacity when a visitor hovers over the image.

img:hover .opacity{
opacity: 0.7;
}