CSS Opacity

CSS opacity property specifies the transparency level of an element. In modern websites, the opacity property is generally used to create hover effects for images.

The opacity property can accept any value from 0 to 1. The higher the value of opacity, the lower the transparency of the element.

The default value of opacity is 1, which indicates that the element will not be transparent at all. The opacity value 0 makes the element fully transparent. See the boxes below:

Try out the example below:

Example:

div{
  opacity: 0.5;
}

Transparency Using RGBA

In the last example, we saw that applying opacity on the whole element also makes its text transparent. However, we can avoid this using the RGBA color format. Which takes help of the rgba() function.

The rgba() function accepts four parameters: rgba(red, green, blue, alpha).

The first three parameters define the color values and the last parameter(alpha) defines the opacity. It can take any value from 0 to 1. The default value is 1.0.

In the example below, we have made only the background transparent, not the text.

Example:

div{
  background-color: rgba(173,216,230,0.5);
}

Using opacity to make images transparent

Till now, we have applied opacity on element’s background only. However, we can also use it to make images transparent. See the below images:

Opacity 1

Opacity 0.7

Opacity 0.3

Try out the example below to see how it works:

Example:

img{
  opacity: 0.5;
}

Hover Effect Using CSS Opacity

CSS opacity property can also be used to add hover effect on images.

Hover over the images below:

Try out the example below to see how it works:

Example:

img{
  opacity: 0.6;
}
img:hover{
  opacity: 1;
}