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>
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>
Image Transparency
The opacity property is used with the :hover selector
Image Transparency
The opacity property is used with the :hover selector
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>
Image Transparency
The opacity property is used with the :hover selector
Image Transparency
The opacity property is used with the :hover selector
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>
Image Transparency
The opacity property is used with the :hover selector
Transparent Box
(default)
opacity 0.6
opacity 0.3
opacity 0.1