CSS - opacity Property

Previous
Next

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.

Possible Values

  • <alpha-value> − A number that must be in the range of 0.0 to 1.0.

  • <percentage> − A specific percentage value must be in the range of 0% to 100%.

Applies to

All the HTML elements.

Syntax

opacity: 0.9;
opacity: 90%;

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 - <alpha-value> 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>
   .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 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>
   .percentage-opacity {
      background-color: #d3360b;
      opacity: 70%;
      padding: 10px;
      width: 150px;
      height: 110px;
   }
</style>
</head>
<body>
   <div class="percentage-opacity">
      <h3>CSS Opacity to 70%</h3>
   </div>
</body>
</html>

CSS opacity - With Images

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

<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 - 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>
   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="Tutorialspoint">
   </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.

Here is an example −

<html>
<head>
<style>
   div {
      width: 200px;
      padding: 10px;
      text-align: center;
   }
   .decimal-opacity1 {
      background-color: rgba(227, 220, 11);
      opacity: 0.1;
   }
   .decimal-opacity2 {
      background-color: rgba(227, 220, 11);
      opacity: 0.3;
   }
   .decimal-opacity3 {
      background-color: rgba(227, 220, 11);
      opacity: 0.6;
   }
   .decimal-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="decimal-opacity1">
         CSS Opacity 0.1
      </div>
      <div class="decimal-opacity2">
         CSS Opacity 0.3
      </div>
      <div class="decimal-opacity3">
         CSS Opacity 0.6
      </div>
      <div class="decimal-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>

CSS opacity - Change With An Action

Here is an example of how to change the opacity of an element 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: 150px;
      height: 60px;
      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>
Print Page
Previous
Next
Advertisements