opacity — CSS Technical Interview Questions & Answers

Transparency of an entire element, including children.

opacity

  • Transparency of an entire element, including children.
  • opacity is a CSS property: it changes how a selected element looks or sits. You write it inside a rule: .card { opacity: …; }
  • Change one value, refresh, say what moved: colour, space, size, or stacking. That is how you learn properties — not by memorising the spec.
  • Trap: putting it on the wrong selector (parent vs child). Trap: px only on a phone page — learn rem/%/flex too when it is layout.
  • Box model reminder: width/height, padding, border, margin are different. If opacity is about space, draw the box.

Technical Interview Tip: opacity: one rule on .card, then say what changed.

Code Examples for opacity

opacity — working example

.dim {
  opacity: 0.5;
}

.fade-in {
  opacity: 0;
  transition: opacity 200ms ease;
}

.fade-in.is-visible {
  opacity: 1;
}

opacity sets transparency for the entire element (including children) from 0 to 1.

How to Explain opacity to an Interviewer

What does opacity do?

A CSS property that changes look/layout Write it in a rule and refresh