Member Avatar for mushget

Im looking to make a css photo gallery. Very simple that can fit on one page, and has no javascript or anything fancy. It's for a school project and all we have learned is CSS and HTML coding.

  • 5 Contributors
  • 4 Replies
  • 103 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Ritesh_4

Dani AI

Generated

wanted a single-page, no-JS gallery. The links recommended by , , and are good inspiration; below is a compact, production-friendly pattern that combines a responsive thumbnail grid with a CSS-only lightbox using the :target pseudo-class.

HTML example:

<div id="gallery" class="gallery">
  <a href="#img1"><img src="thumb1.jpg" alt="Photo 1" loading="lazy"></a>
  <a href="#img2"><img src="thumb2.jpg" alt="Photo 2" loading="lazy"></a>
  <a href="#img3"><img src="thumb3.jpg" alt="Photo 3" loading="lazy"></a>
</div>

<div id="img1" class="lightbox">
  <a href="#gallery" class="close" aria-label="Close">Close</a>
  <img src="large1.jpg" alt="Photo 1">
</div>

CSS example:

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.gallery img { width: 100%; height: 120px; object-fit: cover; display: block; }

.lightbox {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.85); padding: 2rem;
}
.lightbox:target { display: flex; }
.lightbox img { max-width: 90%; max-height: 90%; box-shadow: 0 0 12px rgba(0,0,0,0.6); }
.close { position: absolute; top: 1rem; right: 1rem; color: #fff; text-decoration: none; }

Notes and troubleshooting:

  • Include meaningful alt text and loading="lazy" for performance. Use srcset and sizes for responsive images when available.
  • object-fit: cover prevents distortion; fallback can be a background-image on a fixed-size element for very old browsers.
  • Each lightbox needs a unique id; :target updates the URL fragment (direct links and Back/Forward work).
  • Keyboard accessibility: provide a visible, focusable close link with aria-label; automatic focus on the overlay is inconsistent across browsers and often requires JS.
  • For animation, respect prefers-reduced-motion. For more control (keyboard focus management, transitions, or a slideshow), a small bit of JS becomes necessary — otherwise the pattern above stays fully HTML/CSS and fits a school project requirement.

Recommended Answers

All 4 Replies

Member Avatar for drjohn

What he said ^ above!!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.