Flash cards
Review the key moves
What is the main idea behind CSS Opacity?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___: 0.5;Put the learning moves in the order that makes the concept easiest to apply.
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
opacity 0.2
opacity 0.5
opacity 1.0 (default)
Example
img {
opacity: 0.5;
}Live preview
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;
}Live preview
Reversed Hover Effect
Here is an example of reversed hover effect:
Example
img:hover {
opacity: 0.5;
}Live preview
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;
}Live preview
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 */
}Live preview
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>Live preview
Example explained
- Create a <div> element (class="background") with a background image, and a border.
- Create another <div> (class="transbox") inside the first <div>.
- The <div class="transbox"> have a 0.6 transparent background color, and a border.
- Inside the transparent <div>, we add some text inside a <p> element.
CSS Property
| Property | Description |
|---|---|
| opacity | Sets the opacity level for an element |