CSS Image Opacity/Transparency

Learn how to create transparent images with CSS. The CSS3 property for Transparency is Opacity.

Step 1- Creating a Transparent Image
 
The CSS3 property for Transparency is "Opacity".
 
The HTML code for a regular image is as shown below:

  1. <div class="image">  
  2.      <img src="klematis.png"/>  
  3. </div>  

 
 
CSS code for a Transparent Image is as shown below:
  1. .image  
  2.  {  
  3.      opacity: 0.4;  
  4.      filter: alpha(opacity=60);  
  5.  }  
The same image with Transparency is as shown below:
 
 
 
Note:  The opacity property can have a value from 0.0 - 1.0. A lower value makes the element more transparent. The x can have a value from 0 - 100. A lower value makes the element more transparent.
 
Step 2
 
Image Transparency Hover Effect
 
The CSS code is as shown below:
  1. .image:hover  
  2.  {  
  3.    opacity: 1.0;  
  4.    filter: alpha(opacity=100);  
  5.  }  

Note: In this case we want the image to not be transparent when the user hovers over it. When the mouse pointer moves away from the image, the image will be transparent again.

Step 3 - Text in Transparent Box


The HTML code is as shown below:

  1. <div class="background">  
  2.     <div class="transbox">  
  3.         <p> This is some text that is placed in the transparent box.  
  4.   
  5.             This is some text that is placed in the transparent box.  
  6.   
  7.             This is some text that is placed in the transparent box.  
  8.   
  9.             This is some text that is placed in the transparent box.  
  10.   
  11.             This is some text that is placed in the transparent box.  
  12.         </p>  
  13.     </div>  
  14. </div>  

The CSS code is as shown below:

  1. .background  
  2. {  
  3.     width500px;  
  4.     height250px;  
  5.     backgroundurl('klematis.png'no-repeat;  
  6.     border2px solid black;  
  7.     margin-top15px;  
  8.     margin-left15px;  
  9. }  
  10. .transbox  
  11. {  
  12.     width400px;  
  13.     height180px;  
  14.     margin30px 50px;  
  15.     background-color#fff;  
  16.     border1px solid white;  
  17.     opacity: 0.5;  
  18.     filter: alpha(opacity=50);  
  19. }  
  20. .transbox p  
  21. {  
  22.     margin34px 49px;  
  23.     font-weightbold;  
  24.     color#000;  
  25. }

Note: Here, we can manage the width & height, opacity, border, margin (left, right, top and bottom), font-weight, font-family, font-size, color, background-color and background-image as shown above in the CSS code.

Note: If we increase the Opacity of the transparent-box, the CSS code is as shown below:
 

  1. .transbox  
  2. {  
  3.     width400px;  
  4.     height180px;  
  5.     margin30px 50px;  
  6.     background-color#fff;  
  7.     border1px solid white;  
  8.     opacity: 1px;  
  9.     filter: alpha(opacity=50);  
  10. }  

Summary

In this article, we learn about the Opacity Property of CSS.