CSS - Opacity/Transparency

Previous
Quiz
Next

CSS Opacity controls the transparency of an element. In this article we will learn how to implement opacity in multiple ways on images.

Sample Image
0.5

Table of Contents


 

What is Opacity?

The opacity level defines the transparency level of elements in a HTML documents. The opacity values lies between 0 to 1 and the value 1 indicate opaque element, the value 0.5 is 50% see-through, and 0 is completely transparent.

You can use the CSS opacity property on various elements, whether they contain text, images, or serve as backgrounds.

This property is used to creating various visual effects, such as fading in/out, creating overlays, or making background images less prominent.

Syntax

/* Alpha value */
img{
   opacity: 0.9;
}

/* Percentage value */
div{
   opacity: 90%;
}

CSS Opacity Alpha Value

We can make an element's background partially transparent but keeping the text inside visible by setting the element's opacity property to a value between 0 and 1.

Example

Here is an example where we set opacity of a div element to 0.4. 

<html>
<head>
   <style>
      .decimal-opacity {
         background-color: #d3360b;
         opacity: 0.4;
         padding: 10px;
         width: 150px;
         height: 110px;
      }
   </style>
</head>

<body>
   <div class="decimal-opacity">
      <h3>
         CSS Opacity to 0.4
      </h3>
   </div>
</body>
</html>

CSS Opacity Percentage Value

You can also use opacity property with a percentage value to make an element's background partially transparent by setting the element's opacity property to a value between 0% and 100%.

Example

Here is an example where we set opacity to 50%.

<html>
<head>
   <style>
      .percentage-opacity {
         background-color: #d3360b;
         opacity: 50%;
         padding: 10px;
         width: 150px;
         height: 110px;
      }
   </style>
</head>

<body>
   <div class="percentage-opacity">
      <h3>
         CSS Opacity to 50%
      </h3>
   </div>
</body>
</html>

CSS Opacity for Images

In CSS we can set opacity for images to make it partially transparent. This is type styling commonly used in webpages, for example when mouse is hovered over a image, it's opacity reduced.

Example

Here's an example demonstrating the use of the opacity property to create partially transparent images.

<html>
<head>
   <style>
      img{
         margin: 10px;
         width: 170px;
         height: 130px;
      }
      .first-img {
         opacity: 0.1;
      }
      .second-img {
         opacity: 0.5;
      }
      .third-img {
         opacity: 1;
      }
   </style>
</head>

<body>
   <img class="first-img" 
            src="/css/images/tutimg.png" 
            alt="Tutorials-point">
   <img class="second-img" 
            src="/css/images/tutimg.png" 
            alt="Tutorials-point">
   <img class="third-img" 
            src="/css/images/tutimg.png" 
            alt="Tutorials-point">
</body>
</html>

CSS Opacity Image Hover Effect

Here's an example demonstrating the use of the opacity property to make a transparent image when the cursor hovers over it.

<html>
<head>
   <style>
      .opacity-image {
         opacity: 1;
         margin: 10px;
         width: 170px;
         height: 130px;
      }
      .opacity-image:hover {
         opacity: 0.3;
      }
   </style>
</head>

<body>
   <h3>Hover the image</h3>
      <img class="opacity-image" 
            src="/css/images/tutimg.png" 
            alt="Tutorials-point">
</body>
</html>

CSS Opacity With RGBA Color Values

In CSS, while setting RGBA color using rgba() function we can also set opacity value for the color as a parameter inside function.

The opacity property will make an element and all of its child elements transparent. To prevent this, you can use RGBA color values, which allow you to set the opacity of a color without affecting its child elements.

Example

In this example we will define opacity using both rgba function and opacity property and see the difference. 

<html>
<head>
   <style>
      .left{
         float: left;
         width: 44%;
      }
      .right{
         float: right;
         width: 44%;   
      }
      .rgba{
         padding: 15px;
         border: solid;
         margin-bottom: 2px;
         background-color: rgba(227, 220, 11);
      }
   </style>
</head>

<body>
   <div class="left">
      <h4>Using RGBA</h4>
         <div class="rgba" 
              style="background: rgba(227, 220, 11, 0.1);">
                     Opacity 0.1
         </div>
      <div class="rgba" 
              style="background-color: rgba(227, 220, 11, 0.6);">
                     Opacity 0.6
         </div>
      <div class="rgba" 
              style="background-color: rgba(227, 220, 11, 0.9);">
                     Opacity 0.9
      </div>
   </div>
   
   <div class="right">
         <h4>Using Opacity Property</h4>
               <div class="rgba" 
                    style="opacity: 0.1">
                     Opacity 10%
         </div>
         <div class="rgba" 
                    style="opacity: 0.6">
            Opacity 60%
         </div>
         <div class="rgba" 
                    style="opacity: 0.9">
            Opacity 90%
         </div>
   </div>
</body>
</html>

CSS Opacity Change With Action

CSS allows to change opacity of elements dynamically using JavaScript, lets look at the following example.

Example

In the following example we can adjust opacity of image using a slider. 

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        img {
            width: 300px;
            height: auto;
            opacity: 0.5;
            transition: opacity 0.2s;
            border: 2px solid;
            margin-bottom: 15px;
        }
    </style>
</head>

<body>
   <img id="image" 
         src="/css/images/scenery2.jpg" 
         alt="Sample Image">
   <br>
   <strong> Adjust Opacity: </strong>
   
   <input type="range" 
            id="opacitySlider" 
            min="0" max="1" 
            step="0.01" value="0.5">
   <span id="opacityValue">
            0.5</span>

   <script>
      const slider = 
            document.getElementById('opacitySlider');
      const image = 
            document.getElementById('image');
      const opacityValue = 
            document.getElementById('opacityValue');

      slider.addEventListener('input', function() {
         const value = slider.value;
         image.style.opacity = value;
         opacityValue.textContent = value;
      });
   </script>
</body>
</html>
Print Page
Previous
Next
Advertisements