translateY() moves an element vertically with transform while leaving its normal-flow position unchanged. Surrounding content does not reflow around the moved element. section 5.5 section 5.6
Use translateY() to build responsive card interactions:
- Combine it with calc() to move card content by a distance based on the card’s dimensions and spacing. section 5.5
- Pair it with opacity, overflow, and a fixed container height to hide trailing card content without letting it trigger hover flicker. section 5.5
- Animate the movement with transition, and reveal content for both :hover and :focus-within interactions. section 5.5
- Restrict motion effects to hover-capable devices and users who have not enabled reduced motion. section 5.5
Reveal content in a summary card
Initially move the card’s inner container down with transform: translateY(calc(350px - 8rem));. On hover or focus-within, set translateY(0) to slide it back into view. Move nonheading content down 1rem and set opacity to 0 initially, then animate both values to their visible state. 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 hidden-state pattern, including translateY(), height, overflow, opacity, and the reduced-motion media query. section 5.5
