CSS Opacity

This property is used to specify the transparency of an element. In simple word, we can say that it specifies the clarity of the image whether the image is clear or not.

The opacity property takes a value a value from 0.0 to 1.0. A setting of opacity: 1; would make the element completely opaque (i.e. 0% transparent), whereas opacity: 0; would make the element completely transparent (i.e. 100% transparent).


CSS Opacity for All Browser

We can provide opacity to any element using opacity property.

Input:-

Index.html
	
<body> 
	 <p> Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.</p>
</body>

Style.css
p { 
  opacity: 0.5;   
}  

Output:-


CSS Opacity in Internet Explorer 8 and lower

Internet Explorer 8 and lower version supports a Microsoft-only property “alpha filter” to control the transparency of an element.

Input:-

Index.html
	
<body> 
	 <p> Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.</p>
</body>

Style.css
p {
    filter: alpha(opacity=50);
    zoom: 1;  /* Fix for IE7 */
}

Output:-


CSS Image Opacity

We can also make transparent images using CSS Opacity. Below we are illustration images with different opacity.

Input:-

Index.html
	
<body> 
	 <img src="location.png" class="image1"/>
	 <img src="location.png" class="image2"/>
   <img src="location.png" class="image3"/>
</body>

Style.css
img {
    width: 100px;
    height: 100px;
    margin-left: 20px;
}
.image1{
	   opacity: 0.3;
}
.image2{
	   opacity: 0.5;
}
.image3{
	   opacity: 0.75;
}

Output:-


Change Image Opacity on Mouse Over

We can control the opacity over an image on mouse over. Below is an example illustrate that the image is at 0.25 opacity and on hover, changing it to 1 opacity.

Input:-

Index.html
	
<body> 
	 <img src="nature.png" class="image1"/>
</body>

Style.css
.image1{
	   opacity: 0.3;
}
.image1:hover{
	   opacity: 1;
}

Output:-


Text in Transparent Box

When using opacity on an element not only the background of the element that will have transparency, but all of its child elements become transparent as well. It is making the text inside the transparent element hard to read if the value of opacity becomes higher.

Input:-

Index.html
	
<body> 
	 <p> Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.</p>
</body>

Style.css
p {
	   opacity: 0.2;
	   background: #ccc;
}

Output:-

To overcome this, we have this rgba color notation in which ‘a’ in it act as an opacity and will not halt the readiness of the section.


CSS Transparency Using RGBA

One important characteristic to note about the RGBA transparency is that — the ability to control the opacity of individual color. With RGBA, we can make the text color of an element transparent and leave background intact.

Input:-

Index.html
	
<body> 
	 <p> Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.</p>
</body>

Style.css
p {
	   background: rgba(204, 204, 204, 0.2);
}

Output:-

Here, the opacity of the background changes, but content is fully visible, no opacity is applied on it.