CSS-Opacity

To specify the transparency of an element, we use CSS opacity property. In simple word, we can say that it specifies the clarity of the image.

Transparent Image

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

Example :-

Result

Forest

Transparent Hover Effect

We use the CSS opacity property often together with the :hover selector to change the opacity on mouse-over:

Example :-

Result

Forest Mountains

Note: In IE, a !DOCTYPE must be added for the :hover selector to work on other elements than the a element.

Transparent Box

When we use the CSS 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 :-

Result

opacity 0.1

opacity 0.3

opacity 0.6

opacity 1