This project is an interactive image gallery that allows users to filter images by categories using JavaScript. It's a visually engaging way to display images where users can view specific groups of images (like nature, architecture, people, etc.) by clicking on filter buttons.

Key Components

HTML Structure

The gallery consists of:

A group of filter buttons (like All, Nature, Animals, Travel)

A grid of images, each assigned to one or more categories

CSS Styling

The layout is styled to display images in a grid

Basic transitions and hover effects can enhance user interaction

Media queries make the gallery responsive on mobile devices

JavaScript Functionality

Listens for clicks on the filter buttons

Shows only the images that match the selected category

Hides images that do not match

Includes a default "All" filter to reset the view

How It Works

All images are visible by default

When a user clicks a filter button:

JavaScript loops through all images

It checks the image's category class

It hides non-matching images and shows the ones that match

The active filter button is highlighted for better UX

Why It’s Useful

Helps organize large image collections

Improves user experience by reducing clutter

Can be used in portfolios, e-commerce, or travel sites

Features You Can Add

Smooth fade-in/fade-out transitions

Lightbox preview on click

Dynamic image loading from an API or JSON file

Search bar to filter by keywords