CSS Image Effects
This page covers CSS image effects including opacity, text positioning, and fade effects.
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)
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:
Example
Bottom Left
Top Left
Top Right
Bottom Right
Centered
Try it Yourself:
Top Left » Top Right » Bottom Left » Bottom Right » Centered »
