bugl
bugl
HomeLearnPatternsSearch
HomeLearnPatternsSearch
Learn/CSS/Advanced Styling
CSS•Advanced Styling

CSS Image Effects

CSS Image Opacity

Formula

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;
}

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 »

Previous

CSS Styling Images

Next

CSS Image Hover Overlays