CSS Image Gallery and Hover Effects

Image galleries benefit from consistent thumbnail proportions, captions and responsive columns.

Use CSS Grid with repeat(auto-fit, minmax(...)). Give images an aspect-ratio and object-fit:cover when uniform cropping is appropriate, and include alt text that describes informative imagery.

Provide captions and links as real HTML. Decorative hover zoom can improve feedback, but captions and essential actions must already be available.

Grid chooses a column count based on space; fixed thumbnail aspect ratios keep rows aligned even when source images differ.

Lay out simple illustrated tiles with equal aspect ratio.

HTML

<div class="gallery"><figure><div class="art art-a" role="img" aria-label="Blue sky">Sky</div><figcaption>Sky</figcaption></figure><figure><div class="art art-b" role="img" aria-label="Green forest">Forest</div><figcaption>Forest</figcaption></figure><figure><div class="art art-c" role="img" aria-label="Orange sunset">Sunset</div><figcaption>Sunset</figcaption></figure></div>

CSS

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 115px), 1fr)); gap: 11px; } .gallery figure { margin: 0; } .art { display: grid; place-items: center; aspect-ratio: 4 / 3; color: #fff; border-radius: 8px; font-weight: 700; } .art-a { background: linear-gradient(135deg, #2563eb, #93c5fd); } .art-b { background: linear-gradient(135deg, #065f46, #6ee7b7); } .art-c { background: linear-gradient(135deg, #b45309, #fbbf24); } .gallery figcaption { margin-top: 5px; font-size: 13px; }

Rendered output

Observe: All three landscape-themed tiles remain aligned as the columns change.

Give tiles a contained scale effect and keep captions visible.

HTML

<div class="gallery"><figure><div class="art art-a" role="img" aria-label="Blue sky">Sky</div><figcaption>Sky</figcaption></figure><figure><div class="art art-b" role="img" aria-label="Green forest">Forest</div><figcaption>Forest</figcaption></figure><figure><div class="art art-c" role="img" aria-label="Orange sunset">Sunset</div><figcaption>Sunset</figcaption></figure></div>

CSS

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 115px), 1fr)); gap: 11px; } .gallery figure { margin: 0; overflow: hidden; border-radius: 8px; } .art { display: grid; place-items: center; aspect-ratio: 4 / 3; color: #fff; font-weight: 700; transition: transform 200ms ease; } .art-a { background: linear-gradient(135deg, #2563eb, #93c5fd); } .art-b { background: linear-gradient(135deg, #065f46, #6ee7b7); } .art-c { background: linear-gradient(135deg, #b45309, #fbbf24); } .gallery figure:hover .art { transform: scale(1.05); } .gallery figcaption { padding: 7px; background: #f1f5f9; font-size: 13px; } @media (prefers-reduced-motion: reduce) { .art { transition: none; } .gallery figure:hover .art { transform: none; } }

Rendered output

Observe: Hover changes the illustration, but the caption is visible without hover.

Grid chooses a column count based on space; fixed thumbnail aspect ratios keep rows aligned even when source images differ.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Do not hide captions until hover; touch users may never see them.

• Replacing real image content with empty decorative divs loses alt-text information.

Replace a decorative tile with a real img tag and apply object-fit:cover with a useful alt attribute.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Use real images and captions in production; treat these color tiles as a layout demonstration.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.