CSS opacity Property
The opacity property of an element in CSS describes the transparency of the element. It is the inverse of transparency and represents the extent to which content is hidden behind an element.
Image Opacity: The opacity property is used in the image to describe the image's transparency. The opacity value ranges from 0.0 to 1.0, with a low value representing high transparency and a high value representing low transparency. Opacity percent = Opacity * 100 is the formula for calculating opacity percentage.
Image Hover Opacity: When the mouse is over an image, the hover opacity property is applied; otherwise, the opacity property changes. The opacity value can easily reverse the process by initially setting it to a higher value and then lowering it when hovering over it.
Transparency box and transparency using RGBA values: In the transparency box, the child property inherits the property from the parent property, but in the case of RGBA transparency, only the opacity property is used or applied to add transparency to an element's background.
Syntax
Property Values
| Value | Description |
|---|---|
| number | The opacity is specified. From 0.0 (complete transparency) to 1.0 (fully opaque). |
| initial | This property is set to its default value. |
| inherit | This property is inherited from its parent element. |
Supported Browsers
| Property | Chrome | Firefox | Safari | Edge / IE | Opera |
|---|---|---|---|---|---|
| opacity | 4.0 | 2.0 | 3.1 | 9.0 | 9.0 |