How to add Image Opacity in CSS with Cross Browser Support?

0 1768

In this tutorial, I will explain how to add opacity in CSS, which is valid across various browsers.

Sometimes to make our webpage visually appealing, we need to set opacity in the images. This can be achieved with the help of CSS. The opacity property determines the level of transparency in the images. This property allows us to customize the transparency level as per requirement.

We can create elements with full or semi-transparency by setting the values between 0 to 1.

For example, if opacity values are 1, it makes the element completely opaque, and value 0 makes the element completely transparent. By default, browser opacity is 1. A value between 0 and 1 gradually clarifies opacity to an element.

Try this sample code in your editor to see it by yourself.

Code:

<!DOCTYPE html>
<html>
  <head>
    <title> How to Add Cross Browser Opacity in CSS </title>
   <style>
      html,
      body {
        height: 100%;
      }

    .mid
    {
     width: 40%;
     margin: 0px auto;
     font-family: Verdana,Geneva,sans-serif;
     padding: 10px;
     height: 100vh;
     text-align: center;

    text-align: center;
    }
     .mid h1, .mid h2
     {
      font-family: Verdana,Geneva,sans-serif;
      font-size: 24px;
      color: #000;

     }
    img.opt-1 {
        opacity: 1;
        -moz-opacity: 1;
        -khtml-opacity: 1; /* Safari 1.x */
      }
      img.opt-zerofive {
        -moz-opacity: 0.5;
        -khtml-opacity: 0.5; /* Safari 1.x */
        opacity: 0.5;
      }
    </style>
  </head>

 <body>
    <div class="mid">
    <h1> Opacity value 1 </h1>
    <img src=" https://www.codingtag.com/img/code-1.png" class="opt-1"  alt="Coding Tag">
     <h1> Opacity value 0.5 </h1>
    <img src=" https://www.codingtag.com/img/code-1.png" class="opt-zerofive" alt="Coding Tag">

    </div>
  </body>

</html>

Output: