Hero image with live text

A hero pairs a large image with real text. The question is what happens to that text as the space narrows: does it move below the image and keep its own room, or does it stay pinned over the picture and collide with it.

Look for

Headline text sitting on the image subject, words running past the right edge of the frame, or a caption clipped by the bottom of the image.

A · Expected pass

Fluid image, text in its own column, stacking below as the space narrows.

Light falls across the stair in the late afternoon

This headline and its body copy live in a column beside the image, not on top of it. As the canvas narrows the column keeps its own width, the text rewraps, and at mobile the whole pair becomes a single stack. Nothing is ever printed over the picture.

Caption: the box grows taller as the caption rewraps, so no line is ever lost.

B · Known risk

Text pinned over the image at fixed coordinates, in a fixed-height box.

Light falls across the stair in the late afternoon

Body copy pinned to a fixed box over the picture. As the frame narrows this text rewraps into more lines than the box was cut for, and the extra lines are clipped away.

Caption: this single line is cut in half once it has to wrap.