A two-image transition with a small amount of CSS

Two images can communicate a change more effectively than a long animation: a before and after, a product detail, or two stages of a design. First decide whether the comparison is essential information or just a decorative transition.

This replaces the historical jQuery animation tutorial with a CSS-first approach. It does not use or redistribute the original example images.

Stack images without moving the layout

.image-pair { display: grid; }
.image-pair img {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
}
.image-pair .after { opacity: 0; }
.image-pair[data-view="after"] .after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .image-pair .after { transition: opacity 180ms ease; }
}

Use images with matching proportions or define an explicit crop. Set their width and height attributes so the page can reserve space before loading.

Make the change intentional

Use a button to switch data-view and update an accessible label or pressed state. Do not rely solely on hover: touch users may never receive it, and keyboard users need an equivalent action.

If the difference between the two images matters, describe it in a caption and keep a way to inspect both states. A decorative duplicate can have an empty alternative; a meaningful comparison needs text that explains what changed.

Keep the effect inexpensive

Export images at useful sizes instead of downloading two huge originals. Avoid continuous autoplay. Handle a missing image by leaving the working image and its caption available rather than fading to an empty box.

The CSS transition reference documents the mechanism. The larger design decision is restraint: the transition should make a change easier to see, not make the whole page feel busy.