Image Gallery Project

This project is a responsive Image Gallery built using HTML and CSS. It showcases a collection of images displayed in a flexible grid layout with hover effects and smooth transitions.

Features

• 📸 Responsive Design: Adjusts seamlessly to different screen sizes.
• 🎨 Modern Styling: Grayscale image effect with hover transitions.
• 🎯 Hover Effects: Images turn colorful with a subtle zoom effect on hover.
• 🖼️ Caption Reveal: Image captions appear smoothly on hover.

Technologies Used

• HTML5: For structuring the gallery and image elements.
• CSS3: For styling, hover effects, and flexbox layout.

Project Structure

|-- assets/
|   |-- image1.jpg
|   |-- image2.jpeg
|   |-- ...
|
|-- index.html
|-- styles.css
|-- README.md

How to Run the Project

1. Clone the repository:

   git clone <repository-url>

2. Open index.html in your web browser.
3. Enjoy the interactive image gallery!

How It Works

• The gallery uses Flexbox for layout control.
• The max-width property ensures the gallery adapts to various screen sizes.
• CSS effects like filter, box-shadow, and transform create a modern look.

Customization

You can easily:

• Add more images to the assets/ folder.
• Modify the hover effects in the styles.css file.
• Change the gallery's maximum width by adjusting the .container class.