CSS Opacity / Transparency
The opacity property specifies the opacity/transparency of an element.
Transparent Image The opacity property can take a value from 0.0 - 1.0. The lower the value, the more transparent:
opacity: 0.2
opacity: 0.5
opacity: 1.0
Output :
Transparent Hover Effect
The opacity property is often used together with the :hover selector to change the opacity on mouse-over:
The opacity property is often used with the :hover selector to change the opacity on mouse-over:
Output :
The first CSS block is similar to the code in Example 1.
In addition, we have added what should happen when a user hovers over one of the images. In this case, we want the image to NOT be transparent when the user hovers over it. The CSS for this is opacity: 1;.
Transparent Hover Effect
When the mouse pointer moves away from the image, the image will be transparent again.
Output 3:
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:
Text is fully visible
Text is slightly transparent
Text is harder to read
Text is very hard to read