Image 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

<img src="img_forest.jpg" alt="Forest" style="width:100%;opacity:0.2;">

opacity 0.2

<img src="img_forest.jpg" alt="Forest" style="width:100%;opacity:0.5">

opacity 0.5

<img src="img_forest.jpg" alt="Forest" style="width:100%;">

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

<img src="img_5terre_wide.jpg" alt="Cingue Terre" style="width:100%;height:auto;opacity:0.3"> Bottom Left Top Left Top Right Bottom Right Centered

Try it Yourself: