CSS Opacity Property and Image Opacity Explained

The opacity property controls how opaque an element is on a scale of 0.0 to 1.0. The lower the value, the more transparent the element is.

You can choose up to what extent you want to make the element transparent. You have to add the following CSS property to achieve the transparency levels.

Fully Opaque

.class-name {
opacity: 1;
}
/* OR */
.class-name {
opacity: 1.0;
}

Semitransparent

.class-name {
opacity: 0.5;
}

Fully transparent

.class-name {
opacity: 0;
}
/* OR */
.class-name {
opacity: 0.0;
}

Alternatively, you can use rgba to set the opacity of an element:

.class-name{
background-color: rgba(0, 0, 0, .5);
}

This sets the background-color of an element to black with 50% opacity. The last value in an rgba value is the alpha value. An alpha value of 1 is equal to 100% opacity, and 0.5 (or .5 like above) is equal to 50% opacity.

Image Opacity and Transparency

The opacity property allows you to make an image transparent by lowering how opaque it is.

Opacity takes a value between 0.0 and 1.0.

1.0 is the default value for any image. It is fully opaque.

Example

img {
opacity: 0.3;
}

Include filter: alpha(opacity=x) for IE8 and earlier. The x takes a value from 0-100.

img {
opacity: 0.3;
filter: alpha(opacity=30);
}

Here’s an example of an image set to the parameters in the example above.

You can pair opacity with :hover to create a dynamic mouse-over effect.

Our mission: to help people learn to code for free. We accomplish this by creating thousands of
videos, articles, and interactive coding lessons - all freely available to the public. We also have
thousands of freeCodeCamp study groups around the world.

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services,
and staff.