Home >>CSS Tutorial >CSS Opacity property

CSS Opacity property

CSS Opacity property

The CSS opacity property is used to describe the opacity/Transparency of an element. The opacity is also defined for clarity of the image by using CSS Opacity.

The Opacity property is used to describe the transparency of the image. A low value represents high transparent and high value represents low transparent, where the property can take the value between 0.0 to 1.0 .

The opacity of percentage is calculated as:

Opacity% = Opacity * 100. Let's take an example of opacity:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Opacity property</title> 
        <style> 
        .flower { 
            opacity: 0.5; 
        } 
        h2 { 
            margin-bottom:5px; 
        } 
        .opacity { 
            text-align:center; 
        } 
        </style> 
    </head> 
    <body> 
        <div class = "opacity"> 
            <h2>original image with 100% opacity</h2> 
            <img src= "..\CSS opacity\opac.jpg" class="flower1" > 
            <br><br> 
            <h2>original Image with 50% opacity</h2> 
            <img src= "..\CSS opacity\opac.jpg" class="flower"> 
        </div> 
    </body> 
</html>  
Output:

original image with 100% opacity


 

original Image with 50% opacity

Transparent Hover Effect

The transparent hover effect is used to change the opacity on mouse-over to an image or text. To use this property, you must set the :hover selector to those element you want to apply transparent hover effect.

Let's take an example of Transparent hover effect:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  opacity: 0.5;
}
img:hover {
  opacity: 1.0;
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property is used with the :hover selector</p>
<img src="..\CSS opacity\opacity1.jpg" alt="flower">
<img src="..\CSS opacity\opacity2.jpg" alt="girl" >
<img src="..\CSS opacity\opacity3.jpg" alt="mountain">
</body>
</html> 
Output:

Image Transparency

The opacity property is used with the :hover selector

Image Transparency

The opacity property is used with the :hover selector

flower girl mountain

Let's take an example of reversed hover effect:

<!DOCTYPE html>
<html>
<head>
<style>
.img2:hover{opacity:0.5;}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property is used with the :hover selector</p>
<img src="..\CSS opacity\opacity1.jpg" alt="flower" class="img2">
<img src="..\CSS opacity\opacity2.jpg" alt="girl" class="img2" >
<img src="..\CSS opacity\opacity3.jpg" alt="mountain" class="img2">
</body>
</html> 
Output:

Image Transparency

The opacity property is used with the :hover selector

Image Transparency

The opacity property is used with the :hover selector

flower girl mountain

Transparent Box

When you need transparent box with using the opacity property you have to add transparency of an element , all of its child property inherit the same transparency from the parent property.

Let's take an example of transparent box:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: #f53d87;
  padding: 10px;
}
div.first {
  opacity: 0.6;
}
div.second {
  opacity: 0.3;
}
div.third {
  opacity: 0.6;
}
</style>
</head>
<body>
<h1>Transparent Box</h1>
<div><p>(default)</p></div>
<div class="first"><p>opacity 0.6</p></div>
<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.1</p></div>
</body>
</html>
Output:

Image Transparency

The opacity property is used with the :hover selector

Transparent Box

(default)

opacity 0.6

opacity 0.3

opacity 0.1


Popular Tutorials