Opacity
Opacity is the degree to which a rendered element or color appears solid rather than transparent.
Web Design Playground, Second Edition
The CSS opacity property specifies the degree to which an element and its contents are transparent.
- How it is used
- Uses opacity to hide and reveal captions and image overlays during hover interactions.
- How deep it goes
- Demonstrates `0` and `1` through positioned gallery layers, with transitions shown for overlays.
- Examples
- Shows a hoverable photo caption and fading before-and-after portfolio images.
- What you can do after
- Apply it with CSS to reveal overlaid captions or images on hover.
Read how Web Design Playground, Second Edition explains opacity →
CSS in Depth, Second Edition
The CSS opacity property specifies the compositing opacity of an element and its contents.
- How it is used
- Fades dropdowns and navigation labels into view as their states change.
- How deep it goes
- Defines the 0–1 range and works through a dropdown fade, its transparent click target, and a delayed-visibility fix.
- Examples
- Uses a dropdown that blocks a link while transparent, then pairs its fade with delayed visibility.
- What you can do after
- Build it from scratch: fade a dropdown while hiding its transparent drawer after the fade completes.
Tiny CSS Projects
The CSS opacity property controls the transparency of an element and its rendered contents.
- How it is used
- Uses opacity to establish visual hierarchy and reveal secondary card content during hover and keyboard-focus interactions.
- How deep it goes
- Demonstrates concrete values and animated state changes, but does not develop opacity beyond these interface examples.
- Examples
- Uses summary-card content reveals and translucent credit-card labels as concrete applications.
- What you can do after
- Apply opacity to hide interactive content visually, animate reveals, and de-emphasize supporting labels.
Related concepts
- hoverconfigured by · Hover is the interface state or interaction triggered when a pointing device is positioned over an element without activating it.
- CSSused by · CSS, or Cascading Style Sheets, is a stylesheet language for specifying the presentation and layout of structured documents and user interfaces.
- display propertyalternative to · The CSS display property specifies how an element participates in layout and the type of box it generates.
- transitionused by · A CSS transition interpolates changes in a CSS property’s computed value over time when that value changes.
- style propertykind of · A style property is a named setting or interface attribute that specifies or exposes a presentation characteristic of an element or view.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.