The transparency is implemented of an element by using CSS opacity property.
You can learn all about transparency in this tutorial; Including How to set the opacity in the background? How to apply the opacity on the text? What is the transparent hover effect? etc.
- Define the values for opacity between 0.0 to 1.0 in CSS transparency.
- The opacity: 0.0 makes element 100% transparent & opacity : 1.0 makes element untransparent.
|
Image 1
|
Image 2
|
Image 3
|
 |
|
|
|
opacity: 0.2
|
opacity: 0.5
|
opacity: 1.0
|
Example: CSS Opacity Property
.img1 {
width: 201px;
height: 147px;
opacity: 0.2;
}
.img2 {
width: 202px;
height: 148px;
opacity: 0.5;
}
.img3{
width: 203px;
height: 149px;
opacity: 1.0;
}
Example with code →
Opacity Hover Effect
The opacity property is often used together with the :hover selector to change the opacity on mouse-over:
Basically, you can see the best effect of opacity by using the mouse-over property, it makes web page feel alive and easily can find out the difference between normal and opacity effect. Let's see the example:
- Reduce opacity with on hover property
- Increase opacity with on hover property
Example: With Both Properties
.higher_to_lower {
width: 204px;
height: 150px;
opacity: 0.8;
}
.higher_to_lower:hover {
opacity: 0.3;
}
.lower_to_higher {
width: 205px;
height: 151px;
opacity: 0.5;
}
.lower_to_higher:hover {
opacity: 1.0;
}
Example with code →
Box Opacity
Box Opacity is just like opacity; Deal with such kind of elements which can contain other elements like div, ul, span, etc by using Box Opacity.
When using the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency.
Example: Box Opacity
.div {
width: 206px;
height: 207px;
background-color: red;
}
.div1 {
opacity: 0.3;
}
.div2 {
opacity: 0.5;
}
.div3 {
opacity: 0.7;
}
Example with code →
The text color is also being transparent with div opacity! this is the problem, when applying opacity to a parent element then it will work for all child elements.
Transparency using RGBA
Suppose, if you want to apply opacity only parent element BUT it should not work for child element then use opacity with background RGBA property.
- Use opacity property in only background.
- RGBA color values is: rgba(red, green, blue, opacity_value)
Example: Opacity with RGBA
div1 {
width: 208px;
height: 209px;
}
.div1 {
background: rgba(76, 175, 80, 0.3 );
}
.div2 {
background: rgba(76, 175, 80, 0.5 );
}
.div3 {
background: rgba(76, 175, 80, 0.7 );
}
Example with code →