Lightbox grid

Grid of thumbnails that open fullscreen on tap. Pure CSS using the :target pseudo-class — no JS.

Carousels Built JS-free

Use when — you have many photos and want the visitor to browse fast (grid view) then drill down (lightbox) for any single one. The Peñaranda y Cobo "Ampliar" pattern. Works great for property tours, portfolio galleries, before/after photo sets.

Live demo

Tap any tile to expand.

Living room Kitchen Bedroom Terrace Bathroom Pool

How it works

Each tile is a link to a hash like #lb1. Each lightbox is a fixed-position overlay with display: none by default. The CSS :target pseudo-class matches the element whose ID equals the URL hash, switching it to display: flex. Click the close (link to #) and the overlay disappears. Back button works too.

The code (HTML)

<div class="grid">
  <a href="#lb1">Living room</a>
  <a href="#lb2">Kitchen</a>
</div>

<div class="lightbox" id="lb1">
  <a href="#" class="lb-close">×</a>
  <div class="lightbox-img">Living room photo</div>
</div>

The code (CSS — the key bits)

.lightbox { position: fixed; inset: 0; display: none; }
.lightbox:target { display: flex; }
.lb-close { position: absolute; top: 18px; right: 18px; }

Variants worth considering

Browser back to close — works automatically since each lightbox open is a new URL state. Back-swipe on iOS dismisses the overlay too. Free polish.

Prev/next in the lightbox — add prev/next links inside each lightbox pointing to #lb and #lb. Still pure CSS, no JS.

Add the rotate-phone hint — for landscape-optimal images, add a CSS-only "rotate your phone" SVG hint that only shows in portrait orientation (@media (orientation: portrait)). Peñaranda y Cobo does this on cinema images.

Compatibility: :target is in every modern browser. Back button integration is automatic. · Inspired by Peñaranda y Cobo's "Ampliar" lightbox.