CSS Image Opacity
The opacity property specifies the opacity/transparency of an element.
The opacity property can take a value from 0.0 - 1.0:
- 0.0 - The element will be completely transparent
- 0.5 - The element will be 50% transparent
- 1.0 - Default. The element will be fully opaque
Example
img {
opacity: 0.5;
}
Opacity and :hover
The opacity property is often used with :hover to change the opacity on mouse-over:
Example
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
Reversed Hover Effect
Here is an example of reversed hover effect:
Example
img:hover {
opacity: 0.5;
}
Transparent Boxes
When using the opacity property to add transparency to the background of an element, all child elements inherit the same transparency. This can make the text inside a transparent element hard to read:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
Example
div {
opacity: 0.3;
}
Transparency using background-color
To NOT apply the transparency to child elements, you can use the background-color property with an RGBA value.
RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color.
An RGBA color value is specified with: rgba(red, green, blue, alpha). Where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
Tip: You will learn more about RGBA Colors in our CSS Colors Chapter.
The following example sets the opacity for the background color and not the text:
100% opacity
60% opacity
30% opacity
10% opacity
Example
div {
background: rgba(4, 170, 109, 0.3) /* Green background with 30%
opacity */
}
Text in Transparent Box
This is some text that is placed in the transparent box.
Example
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: rgba(255, 255, 255, 0.6);
border: 1px solid black;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
Example explained
- Create a element (class="background") with a background image, and a border.
- Create another
(class="transbox") inside the first.- The
have a 0.6 transparent background color, and a border.- Inside the transparent
, we add some text inside aelement.
CSS Property
Property Description opacity Sets the opacity level for an element Want to go beyond the notes?
Join CodingNow 2.0's CSS course — live mentorship, real projects, and 100% placement support.
Enroll Now — Free Demo AvailableCSS Opacity – FAQs
Quick answers about learning CSS Opacity in CSS.
This free note from CodingNow 2.0 explains CSS Opacity in CSS — concept, syntax and worked code examples you can copy, run and revise before interviews.Yes. Every CSS topic on CodingNow 2.0, including CSS Opacity, is 100% free with no signup required.With focused practice, most students grasp CSS Opacity in 1–3 days from these notes; pairing it with CodingNow 2.0's mentor-led course takes you to job-ready depth faster.Use the code examples in this note, then ask doubts for free on the CodingNow 2.0 Community (/community) — expert instructors answer within 24 hours.
- Create another