CSS — Image Gallery

The zero-media-query grid

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.gallery img {
    width: 100%;
    aspect-ratio: 1 / 1;      /* uniform squares */
    object-fit: cover;         /* tidy crops from any source */
    border-radius: 8px;
}

(As many ≥220px columns as fit — 5 on desktop, 2 on phones, no media queries. The responsive-images trio at work.)

Hover zoom + dim

.gallery a {
    display: block;
    overflow: hidden;
    border-radius: 8px;
}
.gallery img {
    transition: transform .3s ease, filter .3s ease;
}
.gallery a:hover img {
    transform: scale(1.06);
    filter: brightness(.85);
}

Zoom happens inside the clipping anchor — layout never shifts.

Caption overlay on hover

<a class="shot" href="big.jpg">
    <img src="thumb.jpg" alt="Sunrise over lake">
    <span>Sunrise over lake</span>
</a>

.shot {
    position: relative;
}
.shot span {
    position: absolute;
    inset: auto 0 0 0;
    padding: 20px 12px 10px;
    background: linear-gradient(transparent, rgba(0,0,0,.75));
    color: white;
    font-size: .85rem;
    opacity: 0;
    translate: 0 8px;
    transition: opacity .25s, translate .25s;
}
.shot:hover span,
.shot:focus-visible span {
    opacity: 1;
    translate: 0 0;
}

(Gradient scrim rises with the caption from the bottom edge.)

Featured tile spanning

One hero image breaking the rhythm:

.featured {
    grid-column: span 2;
    grid-row: span 2;
}

<div class="gallery">
    <a class="shot featured" …>…</a>
    <a class="shot" …>…</a>
    <!-- rest flow around it -->
</div>

Lightbox wiring (minimal JS)

Clicks open the full image in an overlay:

<div class="lightbox" hidden>
    <img alt="">
</div>

const lb = document.querySelector(".lightbox");
const lbImg = lb.querySelector("img");

document.querySelector(".gallery").addEventListener("click", e => {
    const link = e.target.closest("a");
    if (!link) return;
    e.preventDefault();
    lbImg.src = link.href;
    lb.hidden = false;
});

lb.addEventListener("click", () => lb.hidden = true);
document.addEventListener("keydown", e => e.key === "Escape" && (lb.hidden = true));

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.9);
    display: grid;
    place-items: center;
    z-index: 1000;
}
.lightbox img {
    max-width: 90vw;
    max-height: 90vh;
}

(Click any thumb → fullscreen view; click anywhere or Esc to close.)

Masonry-ish variety without JS

Varying heights via row spans:

.tall { grid-row: span 2; }
.wide { grid-column: span 2; }

True masonry needs grid-template-rows: masonry (still experimental) or a JS library — span-based variety usually satisfies.

Mini Practice

1. Auto-fill square gallery from 10 mixed-size photos.
2. Hover zoom + scrim captions.
3. One featured 2×2 tile.
4. Working mini-lightbox with Escape close.
5. Add focus-visible styles so keyboard users see everything mouse users do.

Next: image sprites →