introduction
- Introduction to CSS
- How and where to write CSS?
- CSS Selectors
- Size and Other Units of Measurement
- CSS colors
- Other uses of colour
Formatting Text
Box Model
Advanced selectors
More about CSS
The opacity is the property of an element that describes the transparency of the element. It is the opposite of transparency and represents the degree to which the content will be hidden behind an element. We can apply the opacity with different styling properties to the elements. A few of them are discussed below:
Image Opacity: The opacity property is used in the image to describe the transparency of the image. The value of opacity lies between 0.0 to 1.0 where a low value represents high transparency and a high value represents low transparency. The percentage of opacity is calculated as:
Opacity% = Opacity * 100
Example:
<html>
<head>
<title>Opacity property</title>
<style>
.forest {
opacity: 0.5;
width: 20%;
}
.forest1 {
width: 20%;
}
p {
font-size: 25px;
font-weight: bold;
margin-bottom: 5px;
}
.opacity {
text-align: center;
}
</style>
</head>
<body>
<div class="opacity">
<p>Image with 100% opacity (original image)</p>
<img src="images/image.jpg" ; class="forest1">
<br>
<br>
<p>Image with 50% opacity</p>
<img src="images/image.jpg" ; class="forest">
</div>
</body>
</html>Output:
Image Hover Opacity: The opacity property can be applied to an image when the mouse hovers over the image. The value of opacity should be set as a higher value at first and then lowering it when hovering over it like:
Syntax:
.image {
opacity: 1.0;
}
.image:hover {
opacity: 0.5;
}Example:
<html>
<head>
<title>Image Hover Opacity</title>
<style>
.ept_opacity {
opacity: 0.5;
width: 10%;
}
.ept_opacity:hover {
opacity: 1.0;
}
.main {
text-align: center;
}
</style>
</head>
<body>
<div class="main">
<h1>Image Hover Opacity:</h1>
<img src="images/image.jpg" class="ept_opacity">
</div>
</body>
</html>Output:
If we hover our mouse over the image it will look like:
Transparency box and transparency using RGBA values: In the transparency box, child property inherit the property from the parent property but in the case of transparency using RGBA, only opacity property is used or applied to add transparency to the background of an element.
Example:
<html>
<head>
<title>Transparent box</title>
<style>
.ept {
background: rgb(0, 0, 153);
padding: 15px;
text-align: center;
width: 300px;
color: white;
}
#ept {
padding: 15px;
text-align: center;
width: 300px;
color: white;
}
.rgba1 {
background: rgba(0, 0, 153, 0.1);
}
.rgba2 {
background: rgba(0, 0, 153, 0.5);
}
.rgba3 {
background: rgba(0, 0, 153, 0.8);
}
.rgba4 {
background: rgba(0, 0, 153, 1.0);
}
.e1 {
float: left;
margin-left: 50px;
}
.e2 {
margin-top: -40px;
margin-left: 50px;
float: left;
}
</style>
</head>
<body>
<div class="e1">
<p style="font-size:24px;font-weight:bold;">Transparent Box</p>
<div class="ept" style="opacity:0.1;">
<p>10% opacity</p>
</div>
<div class="ept" style="opacity:0.5;">
<p>50% opacity</p>
</div>
<div class="ept" style="opacity:0.8;">
<p>80% opacity</p>
</div>
<div class="ept">
<p>100% opacity</p>
</div>
</div>
<br>
<br>
<div class="e2">
<p style="font-size:24px;font-weight:bold;">RGBA color values</p>
<div class="rgba1" id="ept">
<p>10% opacity</p>
</div>
<div class="rgba2" id="ept">
<p>50% opacity</p>
</div>
<div class="rgba3" id="ept">
<p>80% opacity</p>
</div>
<div class="rgba4" id="ept">
<p>100% opacity</p>
</div>
</div>
</body>
</html>Output:
Text In Transparent Box: The opacity property can be used to decrease or increase the opacity of a box and put text inside of it for making the most egregious posts.
Example:
<html>
<head>
<style>
div.bg {
background: url("images/image.jpg");
width: 550px;
height: 300px;
border: 1px solid;
}
div.box {
margin: 50px 20px;
text-align: center;
width: 500px;
height: 150px;
background-color: #000000;
border: 3px solid white;
opacity: 0.5;
}
div.box p {
margin: 5%;
font-family: Arial;
color: white;
font-weight: bold;
font-size: 25px;
}
</style>
</head>
<body>
<div class="bg">
<div class="box">
<p>Edupoly Tutorials</p>
</div>
</div>
</body>
</html>Output: