CSS Opacity

CSS Opacity / Transparency

The opacity property specifies the opacity/transparency of an element.

Example 1: Image Opacity

The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent.

Example 2: Transparent Hover Effect

The opacity property is often used together with the :hover selector to change the opacity on mouse-over.

Example 3: Transparent Box

When using the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency. This can make the text inside a fully transparent element hard to read.

Example 4: Transparency using RGBA

If you do not want to apply opacity to child elements, use RGBA color values instead. The alpha channel (the 4th value) specifies the opacity for the color.

img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}

div {
  background: rgba(76, 175, 80, 0.3);
}