CSS Opacity property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency. Opacity has a default initial value of 1 (100% opaque). Opacity is not inherited, but because the parent has opacity that applies to everything within it. You cannot make a child element less transparent than the parent, without some trickery. Values are a number from 0 to 1 representing the opacity of the channel (the “alpha” channel). When an element has a value of 0 the element is completely invisible; a value of 1 is completely opaque (solid).
img {
opacity: 0.6;
}
CSS Opacity Values
<alpha-value>A <number> in the range 0.0 to 1.0, inclusive, or a <percentage> in the range 0% to 100%, inclusive, representing the opacity of the channel (that is, the value of its alpha channel). Any value outside the interval, though valid, is clamped to the nearest limit in the range.
| Value | Meaning |
|---|---|
0 | The element is fully transparent (that is, invisible). |
Any <number> strictly between 0 and 1 | The element is translucent (that is, content behind the element can be seen). |
1 (default value) | The element is fully opaque (visually solid). |
CSS Opacity- Hover effect
The opacity property is often used together with the :hover selector to change the opacity on mouse-over
img {
opacity: 0.6;
}
img:hover {
opacity: 1.2;
}
CSS Opacity- 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
div {
opacity: 0.5;
}