26 - CSS Image Transparency

Image transparency is the degree to which an image is visible. The visibility factor depends on the value of opacity property. This property is first discussed in CSS Transitions specification and fully defined in CSS3 specification later.

Syntax:

      Opacity : <number>;

Valid Values

Number is any number in the range 0.0 to 1.0. The lowest value is 0.0 and the highest 1.0.

  1. indicate the most transparent image (most faded image) and 1.0 is fully opaque.
<html>
   <head>
      <style>
         img.Transparent{
         opacity:0.2;
         height:75px;
         width:100px;
         }
         img.translucent{
         opacity:0.5;
         height:100px;
         width:100px;
         }
         img.opaque{
         opacity:1.0;
         height:100px;
         width:100px;
         }
      </style>
   </head>
   <body>
      <div>
         <p>Transparent Image...
            <img  class="Transparent" src="C:/Users/User/Desktop\Tulips.jpg"/>
      </div>
      <div>
         <p>Translucent Image...
            <img class="translucent" src="C:\Users\User\Desktop\way.jpg"/>
      </div>
      <div>
         <p>Opaque Image...
            <img class="opaque" src="C:\Users\User\Desktop\way.jpg"/>
      </div>
   </body>
</html>

The output of the above program would be:

      

<html>
   <head>
      <style>
         img.Transparent{
         opacity:0.2;
         height:75px;
         width:100px;
         }
         img.translucent{
         opacity:0.5;
         height:100px;
         width:100px;
         }
         img.opaque{
         opacity:1.0;
         height:100px;
         width:100px;
         }
      </style>
   </head>
   <body>
      <div>
         <p>Transparent Image...
            <img  class="Transparent" src="C:/Users/User/Desktop\Tulips.jpg"/>
      </div>
      <div>
         <p>Translucent Image...
            <img class="translucent" src="C:\Users\User\Desktop\way.jpg"/>
      </div>
      <div>
         <p>Opaque Image...
            <img class="opaque" src="C:\Users\User\Desktop\way.jpg"/>
      </div>
   </body>
</html> 

The output of the above program would be:

         

When hovered:

         

Like us on Facebook