CSS Opacity / Transparency

    In, this CSS tutorial, we will be discussing the opacity property of an Element, we will also discuss how can we make an image transparent using the opacity property.

    CSS opacity Property

    The opacity property of an element represents how much opaque and transparent an element should be on the web browser. By default, the value of opacity is 1 which mean the element is opaque and the user can see it clearly. But if the value of opacity is less than 1, it increases its transparency and element becomes transparent.

    Example: 

    <!DOCTYPE html>
<html>
   <head>
     <style>
        .img_1 {
               opacity: 1;
            }
          
        .img_2 {
               opacity: 0.5
             }
        .img_3{
               opacity: 0.2
              }
      </style>
   </head>
   <body>
     <p>TechGeekBuzz Logo with default opacity 1.</p>
     <img src="https://secureservercdn.net/160.153.137.163/84g.4be.myftpupload.com/
               wp-content/uploads/2019/03/Techgeekbuzz.png"
               width="80px" height="40px" class="img_1">
 
      <p>TechGeekBuzz Logo with opacity 0.5.</p>
      <img src="https://secureservercdn.net/160.153.137.163/84g.4be.myftpupload.com/
                 wp-content/uploads/2019/03/Techgeekbuzz.png"
                 width="80px" height="40px" class="img_2">
      <p>TechGeekBuzz Logo with opacity 0.2.</p>
       <img src="https://secureservercdn.net/160.153.137.163/84g.4be.myftpupload.com/
                 wp-content/uploads/2019/03/Techgeekbuzz.png"
                 width="80px" height="40px" class="img_3">
    </body>
</html>

    Opaque and Transparent Hover Effect

    Many websites use opacity property on their images to create a transparent to opaque effect. In this we use the : hover pseudo-class to select the image when the user hovers over the image and then change the image opacity from transparent to opaque.

    Example 

    <!DOCTYPE html>
<html>
    <head>
    <style>
        img{
           opacity: 0.3;
           }
   
        img:hover{
          opacity: 1;
                }
    </style>   
    </head>
     <body>
          <p>TechGeekBuzz Logo. Hover over the image</p>
           <img src="https://secureservercdn.net/160.153.137.163/84g.4be.myftpupload.com/
                     wp-content/uploads/2019/03/Techgeekbuzz.png"
                     width="100px" height="40px" >
    </body>
</html>

    Transparency of Child Element

    If we set the opacity for an element less than 1, then the same transparency will be inherited by its all of its children elements. This inheritance of transparency makes the children elements content less readable.

    Example 

    <!DOCTYPE html>
<html>
    <head>
        <style>
        div{
                opacity: 0.3;
        }
            </style>
    </head>
    <body>
        <div>
            <p>Paragraph 1</p>
            <p>Paragraph 2</p>
        </div>
    </body>
</html>

    Preview

    Paragraph 1

    Paragraph 2

    Summary

    • The Opacity property defines the opaqueness and transparency of an element.
    • 1 define the default value for an element opacity and it represents opaque.
    • 0 represent the complete transparency of the element.
    • The child elements inherit the opacity property from their parent.
    Previous Tutorial Next Tutorial