CSS Opacity

CSS Opacity

The opacity property controls the transparency level of an element. It affects the entire element, including its content, background, and children.

Opacity values range from 0 (fully transparent) to 1 (fully visible).

Opacity

You can set opacity using a decimal value.

.box {
  opacity: 0.5;
}

An opacity of 0.5 makes the element semi-transparent.

Opacity Levels

Different opacity values create different visual effects.

.low {
  opacity: 0.3;
}

.medium {
  opacity: 0.6;
}

.full {
  opacity: 1;
}

Opacity and Child Elements

Opacity affects the element and all of its children.

.card {
  opacity: 0.6;
}

This makes all text and inner elements inside .card transparent as well.

Opacity vs RGBA

If you want only the background to be transparent but keep the text fully visible, use rgba() instead of opacity.

/* Using opacity (affects all content) */
.overlay {
  background: blue;
  opacity: 0.4;
}

/* Using RGBA (background only) */
.overlay {
  background: rgba(0, 0, 255, 0.4);
}

Opacity and Hover Effects

Opacity is often used to create hover and focus effects.

.image {
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.image:hover {
  opacity: 1;
}

Opacity and Disabled States

Opacity is commonly used to visually indicate disabled or inactive elements.

.button.disabled {
  opacity: 0.5;
  pointer-events: none;
}

Code Challenge

Goal: Use opacity to create a hover effect and a disabled state.

HTML:

<div class="card">
  <img src="photo.jpg" class="image">
  <a href="#" class="btn disabled">Submit</a>
</div>

Task:

• Reduce the image opacity by default
• Show full opacity on hover
• Visually disable the button using opacity

Try a Solution:

.image {
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.image:hover {
  opacity: 1;
}

.btn.disabled {
  opacity: 0.5;
  pointer-events: none;
}

What’s Next?

Next, you will learn how to build navigation menus using CSS.