My Gallery - Interactive Image Showcase

Description

My Gallery is a responsive and interactive image showcase built with HTML, CSS, and JavaScript. It features a sleek design with a black and white effect on images that reveal their true colors on hover, creating an engaging user experience.

Features

• Responsive grid layout that adapts to different screen sizes
• Black and white filter effect on images with color reveal on hover
• Fullscreen image view with navigation controls
• Smooth animations and transitions
• Keyboard navigation support
• Touch-friendly for mobile devices

Demo

Click here to see live demo 🤟

Technologies Used

• HTML5
• CSS3
• JavaScript (ES6+)
• Google Fonts (Amita and Roboto)

Installation

1. Clone the repository: git clone https://github.com/Hi-Aman-Jain/My-Pic-Gallery.git

2. Navigate to the project directory: cd my-pic-gallery

3. Open index.html in your web browser.

Usage

• Click on any image in the gallery to view it in fullscreen mode.
• Use the arrow buttons or keyboard arrow keys to navigate between images in fullscreen view.
• Press the 'Esc' key or click the close button to exit fullscreen view.
• Hover over images in the gallery to reveal their true colors.

Customization

To add your own images to the gallery:

1. Place your image files in the img/ directory.
2. Update the index.html file, adding or modifying <img> tags within the .gallery.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is open source and available under the MIT License.

Screenshot