Flash cards
Review the key moves
1/4
Core idea
What is the main idea behind CSS Image Effects?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
1Quick choice
Which statement best captures the main point of this lesson?
2Fill blank
Complete the missing token from the example code.
___: 0.5;3Order
Put the learning moves in the order that makes the concept easiest to apply.
The opacity property can take a value from 0.
The opacity property specifies the opacity/transparency of an element.
Image Text Positioning
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
Formatted code
img {
opacity: 0.5;
}Live preview
Tip
Look at the CSS Image Filters chapter to learn how to use the filter property to add visual effects (like opacity, blur, saturation, etc.) to images.
Image Text Positioning
How to position text in an image: