CSS Opacity Define

Please Share On:

Definition:

CSS Opacity is also known as CSS transparency. It specifies the transparency of an element. You can apply transparency wherever you needed like at the image, hover the image, text in a transparent box, and so on.

Syntax:

opacity: 0.4;

Image Opacity:

The default opacity value is 1. The opacity value starts from 0.0 to 1. The lower value is the most transparent element.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      img {
        opacity: 0.5;
      }
    </style>

  </head>
  <body>
    <h3>Image Transparent 50% </h3>
    <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="Image Opacity" width="170" height="100">
  </body>
</html>

Output:

try it yourself

Transparent Image Hover Effect:

It shows a transparent image when the mouse hovers over an image. See the source code with output in the below example.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      img {
        opacity: 0.5;
      }

      img:hover {
        opacity: 1.0;
      }
    </style>
  </head>
  <body>

    <h3>Image Transparent is 50% <br> Transparent Hover effect is 100%</h3>
    <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="Image Opacity" width="170" height="100">
  </body>
</html>

Output:

try it yourself

Transparent Container:

When you use the opacity property to add transparency in the background container, all of its child elements inherit the same transparent. As a result, if you have text inside the container will have the same parent opacity and it will make it a bit hard to read the text.

See an example below of using transparent in parent container and its child text elements also have same transparent.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .title{
        text-align: center;
      }

      div {
        background-color: blue;
        padding: 5px;
      }

      div.first {
        opacity: 0.3;
      }

      div.second {
        opacity: 0.5;
      }

      div.third {
        opacity: 0.8;
      }
    </style>
  </head>
  <body>

    <h3 class="title">Transparent Container</h3>
    <div class="first"><p>Opacity 0.3</p></div>
    <div class="second"><p>Opacity 0.5</p></div>
    <div class="third"><p>Opacity 0.8</p></div>
    <div><p>opacity 1</p></div>
  </body>
</html>

Output:

In the above example, the child element text has the same transparency as its parent element.

try it yourself

Transparent Using RGBA

In the above example, both parent and child elements use the same opacity value. If you want the child element not to use its parent element opacity then the best way to use transparent is by using the RGBA value in your parent background element.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .title{
        text-align: center;
      }

      div {
        background: rgba(0, 0, 255, 1.0);
        padding: 5px;
      }

      div.first {
        background: rgba(0, 0, 255, 0.1);
      }

      div.second {
        background: rgba(0, 0, 255, 0.3);
      }

      div.third {
        background: rgba(0, 0, 255, 0.6);
      }
    </style>
  </head>
  <body>
    <h3 class="title">Opacity applies only on background element, not at text element</h3>
    <div class="first"><p>Opacity 0.1</p></div>
    <div class="second"><p>Opacity 0.3</p></div>
    <div class="third"><p>Opacity 0.6</p></div>
    <div><p>opacity 1</p></div>
  </body>
</html>

Output:

try it yourself

You may be interested in the following topics:

...

Post Views: 1,173

Definition:

Syntax:

Image Opacity:

Source Code:

Output:

Transparent Image Hover Effect:

Source Code:

Output:

Transparent Container:

Source Code:

Output:

Transparent Using RGBA

Source Code:

Output:

Leave a Reply Cancel reply

Copyright @2023. All Right Reserved.