The CSS opacity property controls how transparent an element and its rendered contents appear. Use it to soften secondary text or visually hide content during an interaction. section 5.5 section 9.3.2
Practical uses include:
- Set opacity to 0 to hide nonheader card content while keeping it in the DOM. section 5.5
- Restore opacity to 1 when a card is hovered or receives focus within, optionally animating the change with a transition. section 5.5
- Use a partial value such as 0.7 to make labels mildly translucent and visually less prominent than their paired information. section 9.3.2
Reveal card details
A summary card can hide secondary content with opacity: 0 and translateY(1rem), then reveal it with opacity: 1 and translateY(0) on hover or focus-within. A transition makes both changes gradual. section 5.5
Listing 5.16 Hiding the nonheader content
@media (hover: hover) and (min-width: 700px) and (prefers-reduced-motion:
no-preference) { #1
main > section > div { #2
transform: translateY(calc(350px - 8rem)); #2
height: 5rem; #2
overflow: hidden; #2
} #2
main > section > div > *:not(h2) { #3
opacity: 0; #3
transform: translateY(1rem); #3
} #3
}
Inspect the complete hiding rule, including opacity: 0, selector filtering, translation, fixed height, and overflow handling. section 5.5
Listing 5.17 Showing content on hover and focus-within
@media (hover: hover) and (min-width: 700px) and
(prefers-reduced-motion: no-preference) {
main > section > div {
transform: translateY(calc(350px - 8rem));
height: 5rem;
overflow: hidden;
transition: all 700ms ease-in-out; #1
}
div > *:not(h2) {
opacity: 0;
transform: translateY(1rem);
transition: all 700ms ease-in-out; #1
}
section:hover div, #2
section:focus-within div { #3
transform: translateY(0);
height: calc(350px - 4rem);
}
section:hover div > *:not(h2), #4
section:focus-within div > *:not(h2){ #5
opacity: 1;
transform: translateY(0);
}
}
Compare the hidden and revealed states and see how transitions combine opacity with hover and focus-within selectors. section 5.5
