The CSS opacity is the property of an element that specifies the transparency of an element. In simple words, you can say that it specifies the clarity of the image.
CSS opacity has a default initial value of 1 (100% opaque).
Image Opacity
You can also make transparent images by using CSS opacity property.
The value of opacity lies between 0.0 to 1.0 where a low value (0.0) represents high transparent and high value (1.0) represents low transparent.
Note: IE8 and earlier versions use filter:alpha(opacity=x). The x has a value from 0 – 100. A lower value makes the element more transparent.
Image Hover Opacity
By using the :hover pseudo-class, you can change the opacity of an image when the mouse puts over the image.
Transparency Box
In the transparency box, child property inherits the property from the parent property, when using the opacity property to add transparency to the background. This makes the text inside a fully transparent element is hard to read.
Transparency using RGBA
If you want to apply opacity to the only parent class, not to child class then use RGBA color values. This makes the text inside a fully transparent element is easy to read.
The below example shows how to add RGBA values.
Text In Transparent Box
The opacity property can be used to decrease or increase the opacity of a box and put text inside of it for making the beautiful post.