CSS — Opacity

What is Opacity?

The opacity property controls how transparent an element is. The value ranges from 0 (fully invisible) to 1 (fully visible).

.transparent {
  opacity: 0;      /* invisible */
}

.semi {
  opacity: 0.5;    /* 50% transparent */
}

.solid {
  opacity: 1;      /* fully visible (default) */
}

How Opacity Works

Unlike visibility: hidden, opacity: 0 elements are:

• Still in the document flow (take up space)
• Still clickable/focusable
• Still present in the DOM
• Just invisible

.button {
  opacity: 0;
  pointer-events: none;  /* also disable clicks */
}

Opacity vs Other Visibility Methods

Method	Takes Space	Clickable	Transitionable
opacity: 0	Yes	Yes	Yes
visibility: hidden	Yes	No	No (use visible)
display: none	No	No	No

Hover Effects

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

.button:hover {
  opacity: 1;
}

.thumbnail {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.thumbnail:hover {
  opacity: 1;
}

Fade-In Animation

.fade-in {
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

Staggered Fade-In

.list-item {
  opacity: 0;
  animation: fadeIn 0.3s ease forwards;
}

.list-item:nth-child(1) { animation-delay: 0.1s; }
.list-item:nth-child(2) { animation-delay: 0.2s; }
.list-item:nth-child(3) { animation-delay: 0.3s; }
.list-item:nth-child(4) { animation-delay: 0.4s; }

Opacity with Transforms

.card {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

.card.visible {
  opacity: 1;
  transform: translateY(0);
}

Background Opacity

To make only the background transparent (not the text), use rgba or hsla:

/* Background only — text stays solid */
.box {
  background: rgba(0, 128, 255, 0.3);  /* blue with 30% opacity */
  color: black;  /* unaffected */
}

/* Entire element transparent — text too */
.box {
  opacity: 0.3;
}

Opacity and Accessibility

Screen readers can still read opacity: 0 elements. Use aria-hidden="true" if content should be completely hidden from assistive tech:

<div class="sr-only" aria-hidden="true">Decorative content</div>

Best Practices

• Use rgba() for background transparency — opacity affects children too
• Add transition for smooth fade effects
• Don't use opacity: 0 to hide content from screen readers — use aria-hidden
• Combine with transform for polished animations
• Use pointer-events: none if you want invisible elements to not be clickable

Mini Practice

1. Create a card that fades in on page load
2. Add hover opacity change to a button
3. Create a background overlay with rgba transparency
4. Build a staggered animation for a list of items
5. Compare opacity: 0 with visibility: hidden behavior

Up Next

Next: Float →