CSS-Only Photo Gallery

A pure CSS photo gallery implementation using images from AWS CloudFront. No JavaScript required!

Features

• ✅ CSS-only modals using :target pseudo-class
• ✅ Responsive images with srcset (browser chooses optimal size)
• ✅ Navigation between photos using Previous/Next links
• ✅ Responsive design for mobile and desktop
• ✅ Hover effects and smooth animations
• ✅ Close modal by clicking X button or overlay

How It Works

The :target Trick

The magic is in CSS’s :target pseudo-class:

.modal {
  display: none;
}

.modal:target {
  display: flex;
}

When you click a photo, the URL gets a hash (#photo-1). The CSS :target selector matches elements with that ID, so the modal appears. Clicking the close button changes the hash to # (empty), which hides the modal.

Responsive Images

The gallery uses srcset to provide multiple image sizes:

<img 
  srcset="small.jpg 600w, large.jpg 3600w"
  sizes="(max-width: 768px) 100vw, 33vw"
  src="small.jpg">

The browser automatically chooses:

• Small image (600w) for gallery thumbnails
• Large image (3600w) for modal view
• Optimal size based on screen size and pixel density

No JavaScript needed - the browser handles it intelligently!

Limitations

This CSS-only approach has some trade-offs:

• ❌ No keyboard navigation (arrow keys, escape key)
• ❌ No automatic clipboard copying (users copy URL manually)
• ❌ Navigation buttons always visible (can’t hide on first/last photo)
• ❌ All photos must be in HTML (no dynamic loading)

See CSS_ONLY_FEASIBILITY.md for a detailed analysis.

Adding More Photos

To add more photos, follow this pattern:

1. Add a photo card to the gallery:

<a href="#photo-4" class="photo-card">
  <img 
    srcset="small.jpg 600w, large.jpg 3600w"
    sizes="(max-width: 768px) 100vw, 33vw"
    src="small.jpg"
    alt="Description">
  <div class="photo-info">
    <div class="caption">Your caption here</div>
    <div class="date">January 2024</div>
  </div>
</a>

2. Add a corresponding modal:

<div id="photo-4" class="modal">
  <a href="#" class="modal-close">×</a>
  <a href="#photo-3" class="modal-nav prev">←</a>
  <a href="#photo-5" class="modal-nav next">→</a>
  <div class="modal-content">
    <img 
      srcset="small.jpg 600w, large.jpg 3600w"
      sizes="(max-width: 768px) 90vw, 800px"
      src="large.jpg"
      alt="Description"
      class="modal-image">
    <div class="modal-info">
      <div class="modal-caption">Full caption here</div>
      <div class="modal-date">January 2024</div>
    </div>
  </div>
</div>

3. Update navigation links in adjacent modals to point to the new photo.

Image URLs

Currently using test images from AWS CloudFront:

• Small (600w): https://photos.alabut.com/shelterisland/tower-vertical-600w.avif
• Large (3600w): https://photos.alabut.com/shelterisland/tower-vertical-3600w.avif

Replace these with your own image URLs when adding real photos.

Browser Support

• ✅ Modern browsers (Chrome, Firefox, Safari, Edge)
• ✅ Mobile browsers (iOS Safari, Chrome Mobile)
• ✅ :target pseudo-class (widely supported)
• ✅ srcset (widely supported)
• ✅ CSS Grid (widely supported)

Performance

• No JavaScript to parse or execute
• Browser handles image selection intelligently
• CSS animations are hardware-accelerated
• Minimal page weight (just HTML and CSS)

Accessibility

• Semantic HTML structure
• ARIA labels on buttons
• Keyboard navigation works for links (Tab key)
• Screen reader friendly
• Color contrast meets WCAG guidelines

Note: Keyboard shortcuts (arrow keys, escape) are not available without JavaScript, but standard link navigation works.

Future Enhancements

If you want to add JavaScript later, you could:

• Add keyboard navigation (arrow keys, escape)
• Add automatic clipboard copying
• Add dynamic content loading
• Add lazy loading for images
• Add swipe gestures on mobile

But the CSS-only version works great as-is!