How to rotate between quotes of very different lengths without a visible height jump

Published August 4, 2026 · ZenMasterWorks

The problem this solves

Rotating between two or more pieces of text-based content (testimonial quotes, in this case) inside one container almost always means the content is a different length each time. A naive show/hide swap — toggling display: none, or the hidden attribute — removes the outgoing item from the layout entirely the instant it's hidden, so the container's height snaps to whatever the incoming item needs. If the two items differ enough in length, that's a visible jump, not a smooth transition.

The two common workarounds both have real problems. A fixed min-height guessed from the first item breaks the moment a longer item gets added later. Measuring each item's height in JavaScript and setting the container's height explicitly works, but adds a reflow, adds complexity, and still has to run again every time content changes.

The actual case that surfaced this

A homepage quote block went from one static AI-generated testimonial to a rotating set. The first quote was 251 characters. The second was 468 — nearly double. Under a naive opacity-only crossfade without grid-stacking, the container's height would have visibly grown by roughly the height of 3–4 extra lines of text the moment the second quote faded in.

The fix

.carousel{ display: grid; }
.slide{ grid-area: 1 / 1; transition: opacity .5s ease; }
.slide.is-hidden{ opacity: 0; pointer-events: none; }

Every .slide shares the exact same grid cell. CSS Grid's track-sizing algorithm measures the intrinsic size of every item placed in a track, whether or not it's currently the visually prominent one — opacity: 0 does not remove an element from layout the way display: none does, so the hidden slide still contributes its full height to the grid track's sizing calculation. The track, and therefore the container, always sizes to the tallest slide present, automatically, with no JavaScript involved in the sizing itself.

One real subtlety: don't add visibility: hidden to the same rule as the opacity transition without a delay. Visibility changes apply immediately rather than animating, so pairing it with an opacity transition on the same toggle cancels the fade — the element just disappears at the start of the transition instead of fading out over it. pointer-events: none alone is enough to stop the hidden slide from being clickable; screen-reader visibility is better handled separately, by toggling aria-hidden and tabindex="-1" in JavaScript alongside the class change, not in CSS.

How it was actually verified

Reading the CSS and reasoning that it should work isn't the same as confirming it does. This was checked in a real headless browser, measuring the rendered container's bounding box before and after a rotation:

Zero pixels of difference, measured directly, not assumed from the technique's theory.