7/1/21

CSS Tutorials : CSS Opacity Property

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 {
  opacity0.2;
}
#img2{
    opacity0.5;
}
#img3{
    opacity1;
}
</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-colorchocolate;
    padding10px;
}
#p1 {
  opacity1;
}
#p2{
    opacity0.5;
}
#p3{
    opacity0.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{
    opacity0.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

Like us on facebook

blogger templatesblogger widgets

Follow on Twitter

Linkedin

Categories

Mad About Computer. Powered by Blogger.