CSS Opacity

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

Opacity and :hover

The opacity property is often used with :hover to change the opacity on mouse-over:

<img src="img_lights.jpg" alt="Northern Lights" style="width:100%;" class="imgopac2">

<img src="img_mountains.jpg" alt="Mountains" style="width:100%;" class="imgopac2">

<img src="img_5terre.jpg" alt="Italy" style="width:100%;" class="imgopac2">

Example

img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}

Reversed Hover Effect

Here is an example of reversed hover effect:

<img src="img_lights.jpg" alt="Northern Lights" style="width:100%;" class="imgopac">

<img src="img_mountains.jpg" alt="Mountains" style="width:100%;" class="imgopac">

<img src="img_5terre.jpg" alt="Italy" style="width:100%;" class="imgopac">

Example

img:hover {
  opacity: 0.5;
}

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

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 */
}

Text in Transparent Box

This is some text that is placed in the transparent box.

Example

Example explained

• Create a element (class="background") with a background image, and a border.

• Create another (class="transbox") inside the first .

• The have a 0.6 transparent background color, and a border.

• Inside the transparent , we add some text inside a element.

CSS Property