CSS Tutorial

This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.

Opacity
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
﻿
﻿
﻿
﻿
﻿

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 Tutorial

CSS Advanced

CSS3 Tutorial

CSS Responsive

CSS References

CSS tools

CSS Resources

CSS Tutorial

Opacity

Possible Values

Applies to

Syntax

CSS opacity - <alpha-value> Value

CSS opacity - Percentage Value

CSS opacity - With Images

CSS opacity - Image Hover Effect

CSS opacity - With RGBA Color Values

CSS opacity - Change With An Action