CSS Opacity
The CSS Opacity property is used to specify the transparency of the Html element. In other words, You can also say that it specifies the clarity of the element.
The Opacity property value takes from 0.0 to 1.0. The lower value, the more transparency. Look at the image below.
The First Image that you see in the example has 0.2 Opacity. The Second image has 0.5 and the last image has a default value of 1.
Look at the Code below to understand how its works.
<!DOCTYPE html>
<html>
<head>
<style>
#img1 {
opacity: 0.2;
}
#img2{
opacity: 0.5;
}
#img3{
opacity: 1;
}
</style>
</head>
<body>
<h1>Transparent Images</h1>
<img id ="img1" src="1.jpg" width="270" height="200">
<img id ="img2" src="2.jpg" width="270" height="200">
<img id ="img3" src="3.jpg" width="270" height="200">
</body>
</html>
<html>
<head>
<style>
#img1 {
opacity: 0.2;
}
#img2{
opacity: 0.5;
}
#img3{
opacity: 1;
}
</style>
</head>
<body>
<h1>Transparent Images</h1>
<img id ="img1" src="1.jpg" width="270" height="200">
<img id ="img2" src="2.jpg" width="270" height="200">
<img id ="img3" src="3.jpg" width="270" height="200">
</body>
</html>
Transparent Boxes
You can also use the opacity property to transparent the box or text area. Look at the example below.
Example:-
<!DOCTYPE html>
<html>
<head>
<style>
p{
background-color: chocolate;
padding: 10px;
}
#p1 {
opacity: 1;
}
#p2{
opacity: 0.5;
}
#p3{
opacity: 0.2;
}
</style>
</head>
<body>
<h1>Transparent Boxes</h1>
<p id = "p1"> Opacity 1</p>
<p id = "p2"> Opacity 0.5</p>
<p id = "p3"> Opacity 0.2</p>
</body>
</html>
Output :-
Apply Hover Effect Using Opacity
You can also hover over the image in the form of opacity. Let's Try it
<!DOCTYPE html>
<html>
<head>
<style>
img:hover{
opacity: 0.5;
}
</style>
</head>
<body>
<h1> Hover Property </h1>
<img id ="img1" src="1.jpg" width="270" height="200">
<img id ="img2" src="2.jpg" width="270" height="200">
<img id ="img3" src="3.jpg" width="270" height="200">
</body>
</html>
Ouput :-
Before Hover
After Hover
That's All of today guys hope you all understand this opacity property very well. If you have any doubt comment below we will definitely try to solve it.
0 comments:
Post a Comment