A professional, responsive one-page photo gallery showcasing a variety of real-time CSS filter presets and an in-page lightbox. No build tools or external dependencies—just a single HTML/CSS/JavaScript file.
https://bocaletto-luca.github.io/FilterablePhotoGallery/index.html
-
Dozens of CSS Filter Presets
• Grayscale, Sepia, Saturate, Invert, Brightness, Contrast, Hue-Rotate, Blur, Opacity, Drop-Shadow, and creative combinations
• Instant application to thumbnails and lightbox images -
Responsive Grid Gallery
• Auto-adjusting columns for all screen sizes
• Clean hover states and captions -
In-Page Lightbox
• Click any thumbnail to open full-screen
• Navigate with arrows or keyboard (←/→)
• Close with ✕ button or Esc key -
Zero Dependencies
• Vanilla HTML5, CSS3 and ES6 JavaScript
• No libraries, frameworks or build steps -
GPLv3 Licensed
• Open source under the GNU General Public License v3.0
- Modern web browser (Chrome, Firefox, Safari, Edge)
- Clone the repository
git clone https://github.com/bocaletto-luca/FilterablePhotoGallery.git
- Navigate into the project folder
cd FilterablePhotoGallery - Open
index.htmlin your browser
-
Select a Filter
• Use the dropdown at the top to choose from dozens of built-in presets.
• The gallery updates in real time. -
Browse Images
• Click any thumbnail to open the lightbox.
• Navigate through images with on-screen arrows or your keyboard.
• Press ✕ or Esc to close. -
Experiment & Learn
• Inspect the code to see how CSS custom properties and vanilla JS combine for smooth filter effects.
- HTML5
- CSS3 (Grid, Custom Properties)
- Vanilla JavaScript (ES6)
- Fork this repository
- Create your feature branch
git checkout -b feature/YourFeature
- Commit your changes
git commit -m "Add awesome new filter preset" - Push to the branch
git push origin feature/YourFeature
- Open a Pull Request
This project is licensed under the GPLv3 License.
Bocaletto Luca