Use CSS opacity property to create opaque boxes and text
1. You can make elements or their contents transparent by setting their opacity property , its value can range in between zero(completely transparent) to 1(completely opaque)
color: rgba(255, 255, 0, 0.75); background: rgba(0, 0, 0, 0.75);
Setting the Opacity of an Element
Demo: CSS Opacity
1.In the below demo, we have three elements with different opacity values . The opacity values are applicable(or inherited) to child elements as well
CSS Example : opacity propertyGive it a TRY! » Note: In theory, Opacity is a measure of what percentage of light is blocked by an element.
Opacity with over effects
Demo: Hover on Images to see the effects
1.One of the best practical application of opacity property is to combine them with :hover, to create a dynamic effects as user moves the mouse pointer over the element.