CSS Opacity

How Opacity Works

The opacity property can take a value from 0.0 - 1.0. The lower the value, the more transparent:

• 1: The element is fully opaque (this is the default).
• 0.5: The element is 50% transparent.
• 0: The element is completely transparent (and invisible).

.box {
  opacity: 0.5;
}

Opacity on Hover

A common use case is to change the opacity of an element on hover.

img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}