Selected Reading
Q&A

CSS - Opacity

CSS Opacity Property

The CSS opacity property controls the transparency of an element. Opacity determines how much of a hidden element's content is visible.

You can use the 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

This chapter will cover the use of CSS opacity property which can take one of the following value: −

number − It represented as a decimal number from 0 to 1.
percentage − It represented as a percentage from 0% to 100%.

Following table showing the different opacity values:

Value	Description
0	The element is fully transparent and not visible.
0.5	The element is half transparent.
1	The element is fully opaque and visible.

CSS Opacity - 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.

Here is an example −

<html>
<head>
<style>
   div {
      background-color: #d3360b;
      opacity: 0.4;
      padding: 10px;
      width: 150px;
      height: 110px;
   }
</style>
</head>
<body>
   <div>
      <h3>CSS Opacity to 0.4</h3>
   </div>
</body>
</html>

CSS Opacity - Percentage

You can also use the 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%.

Here is an example −

<html>
<head>
<style>
   .my-opacity {
      background-color: #d3360b;
      opacity: 70%;
      padding: 10px;
      width: 150px;
      height: 110px;
   }
</style>
</head>
<body>
   <div class="my-opacity">
      <h3>CSS Opacity to 70%</h3>
   </div>
</body>
</html>

CSS Opacity for Images

The following example shows how to use the opacity property to make an images partially transparent.

<html>
<head>
<style>
   div {
      display: flex
   }
   .first-img {
      opacity: 0.1;
      margin: 10px;
      width: 170px;
      height: 130px;
   }
   .second-img {
      opacity: 0.5;
      margin: 10px;
      width: 170px;
      height: 130px;
   }
   .third-img {
      opacity: 1;
      margin: 10px;
      width: 170px;
      height: 130px;
   }
</style>
</head>
<body>
   <div>
      <img class="first-img" src="images/tutimg.png" alt="Tutorialspoint">
      <img class="second-img" src="images/tutimg.png" alt="Tutorialspoint">
      <img class="third-img" src="images/tutimg.png" alt="Tutorialspoint">
   </div>
</body>
</html>

CSS Opacity for Image Hover Effect

The following example demonstrates how to use the opacity property to make transparent image when the cursor hovers over it.

<html>
<head>
<style>
   div {
      display: flex
   }
   .opacity-image {
      opacity: 1;
      margin: 10px;
      width: 170px;
      height: 130px;
   }
   .opacity-image:hover {
      opacity: 0.3;
   }
</style>
</head>
<body>
   <h3>Hover Over an image</h3>
   <div>
      <img class="opacity-image" src="images/tutimg.png" alt="redFlower">
   </div>
</body>
</html>

CSS Opacity With RGBA color values

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.

<html>
<head>
<style>
   div {
      width: 200px;
      padding: 10px;
      text-align: center;
   }
   .my-opacity1 {
      background-color: rgba(227, 220, 11);
      opacity: 0.1;
   }
   .my-opacity2 {
      background-color: rgba(227, 220, 11);
      opacity: 0.3;
   }
   .my-opacity3 {
      background-color: rgba(227, 220, 11);
      opacity: 0.6;
   }
   .my-opacity4 {
      background-color: rgba(227, 220, 11);
      opacity: 0.9;
   }
   .rgba-opacity1 {
      background-color: rgba(227, 220, 11, 0.1);
   }
   .rgba-opacity2 {
      background-color: rgba(227, 220, 11, 0.3);
   }
   .rgba-opacity3 {
      background-color: rgba(227, 220, 11, 0.6);
   }
   .rgba-opacity4 {
      background-color: rgba(227, 220, 11, 0.9);
   }
   .transparent-container {
         margin-left: 50px;
         float: left;
   }
   .regba-container {
         margin-left: 50px;
         float: left;
   }
</style>
</head>
<body>
   <div class="transparent-container">
      <h4>Tranparent element</h4>
      <div class="my-opacity1">
         CSS Opacity 0.1
      </div>
      <div class="my-opacity2">
         CSS Opacity 0.3
      </div>
      <div class="my-opacity3">
         CSS Opacity 0.6
      </div>
      <div class="my-opacity4">
         CSS Opacity 0.9
      </div>
   </div>
   <div  class="regba-container">
      <h4>With RGBA color values</h4>
      <div class="rgba-opacity1">
         CSS Opacity 10%
      </div>
      <div class="rgba-opacity2">
               CSS Opacity 30%
      </div>
      <div class="rgba-opacity3">
               CSS Opacity 60%
      </div>
      <div class="rgba-opacity4">
         CSS Opacity 90%
      </div>
   </div>
</body>
</html>

The following example shows how the opacity of an element changes to the specified value when the user clicks a button.

<html>
<head>
<style>
   .opacity-container {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
   }
   .opacity-button {
      background-color: #0cc42b;
      border: none;
      padding: 10px;
      border-radius: 5px;
      cursor: pointer;
      width: 90px;
      height : 40px;
   }
   #heading {
      background-color: #d7e20c;
      width: 250px;
      padding: 5px;
      transition: opacity 0.3s ease;
      text-align: center;
      margin-left: 35%;
   }
</style>
</head>
<body>
   <p>Click the buttons to see how the opacity changes.</p>
   <div class="opacity-container">
      <button class="opacity-button" onclick="changeOpacity(0)">0 opacity</button>
      <button class="opacity-button" onclick="changeOpacity(0.3)">0.3 opacity</button>
      <button class="opacity-button" onclick="changeOpacity(0.6)">0.6 opacity</button>
      <button class="opacity-button" onclick="changeOpacity(0.9)">0.9 opacity</button>
      <button class="opacity-button" onclick="changeOpacity(1)">1.0 opacity</button>
   </div>
      <h3 id="heading">Tutorialspoint CSS Opacity</h3>
   <script>
      function changeOpacity(opacityValue) {
         var selectElement = document.getElementById("heading");
         selectElement.style.opacity = opacityValue;
      }
   </script>
</body>
</html>