A responsive image gallery built with HTML, CSS, and vanilla JavaScript. Users can click thumbnails to open a full-screen lightbox with smooth fade-in transitions, previous/next navigation, and a close control. The layout uses Flexbox for clean, adaptive spacing, while the overlay employs fixed positioning and opacity transitions for a sleek, immersive experience.
I implemented modular image cycling, ensuring seamless looping through images, and structured the component for easy extension—such as adding captions, keyboard navigation, or touch-swipe support. This project demonstrates a design that is lightweight, accessible, and has reusable UI components with strong attention to detail and user experience.
See the Pen Simple Lightbox for Images – With slideshow controls by Steve Mandes (@smandes) on CodePen.