Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
CSS3 Opacity property
The CSS3 opacity property controls the transparency level of an element. It allows you to make elements partially or completely transparent, where a value of 1 means completely opaque and 0 means completely transparent.
Syntax
selector {
opacity: value;
}
Possible Values
| Value | Description |
|---|---|
0.0 |
Completely transparent (invisible) |
0.5 |
50% transparent |
1.0 |
Completely opaque (default) |
Example: Different Opacity Levels
The following example demonstrates different opacity values applied to colored elements −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 60px;
margin: 10px 0;
color: white;
font-weight: bold;
text-align: center;
line-height: 60px;
}
#box1 {
background-color: rgb(255, 0, 0);
opacity: 1.0;
}
#box2 {
background-color: rgb(0, 255, 0);
opacity: 0.6;
}
#box3 {
background-color: rgb(0, 0, 255);
opacity: 0.3;
}
</style>
</head>
<body>
<h3>Opacity Examples:</h3>
<div class="box" id="box1">Opacity: 1.0 (Full)</div>
<div class="box" id="box2">Opacity: 0.6 (Partial)</div>
<div class="box" id="box3">Opacity: 0.3 (Light)</div>
</body>
</html>
Three colored boxes appear: a fully opaque red box, a semi-transparent green box, and a highly transparent blue box demonstrating different opacity levels.
Example: Hover Effect with Opacity
The following example shows how opacity can be used for hover effects −
<!DOCTYPE html>
<html>
<head>
<style>
.image-container {
width: 200px;
height: 150px;
background-color: #4CAF50;
opacity: 0.7;
transition: opacity 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
}
.image-container:hover {
opacity: 1.0;
}
</style>
</head>
<body>
<p>Hover over the box below:</p>
<div class="image-container">
Hover Me!
</div>
</body>
</html>
A semi-transparent green box that becomes fully opaque when hovered over, with a smooth transition effect.
Conclusion
The CSS3 opacity property is essential for creating transparency effects and smooth transitions. It accepts values from 0 to 1 and affects the entire element including its content.
Updated on: 2026-03-15T12:02:14+05:30
138 Views
Advertisements