Image Gallery

A responsive, modern image gallery built with CSS Grid and vanilla JavaScript. Features a masonry-style layout with hover effects and smooth animations.

🌟 Features

• Responsive Masonry Layout: Dynamic grid that adapts to different screen sizes
• CSS Grid: Modern layout system with automatic placement
• Hover Effects: Smooth scale and shadow animations on image hover
• Variable Grid Items: Support for wide, tall, and big image containers
• Unsplash Integration: High-quality images from Unsplash
• Modern Design: Clean gradient background and rounded corners
• Mobile Friendly: Fully responsive design that works on all devices

🚀 Technologies Used

• HTML5: Semantic markup structure
• CSS3: Advanced styling with CSS Grid, transforms, and transitions
• JavaScript: Interactive functionality (script.js included but not connected)
• Unsplash API: High-quality stock images

📁 Project Structure

image-gallery/
├── index.html          # Main HTML file
├── styles.css          # CSS styles and grid layout
├── script.js           # JavaScript functionality (lightbox - not implemented)
└── README.md          # Project documentation

🔧 Installation & Setup

1. Clone or download the project files to your local machine
2. Open index.html in your web browser
3. That's it! No build process or dependencies required

# If using git
git clone [your-repository-url]
cd image-gallery

# Simply open index.html in your browser
open index.html  # macOS
start index.html # Windows

🎨 Layout System

CSS Grid Configuration

.grid-wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-rows: 200px;
    grid-auto-flow: dense;
}

Grid Item Types

• Regular: Standard 1x1 grid cell (250px × 200px)
• Wide (.wide): Spans 2 columns (500px × 200px)
• Tall (.tall): Spans 2 rows (250px × 400px)
• Big (.big): Spans 2 columns and 2 rows (500px × 400px)

✨ Visual Effects

Hover Animation

.grid-wrapper > div > img:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
}

Gradient Background

body {
    background: linear-gradient(45deg, #f9f9fb, #e6e4e8);
}

🖼️ Image Sources

All images are sourced from Unsplash with the following parameters:

• High-resolution images (1350px+ width)
• Auto-format and crop optimization
• Quality setting: 80%
• Various aspect ratios for grid variety

Example Image URLs:

• Standard: https://images.unsplash.com/photo-[id]?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80
• Optimized for different grid sizes

📱 Responsive Design

Breakpoints:

• Desktop: Grid auto-fits based on 250px minimum column width
• Tablet: Maintains grid structure with fewer columns
• Mobile: Single column layout on very small screens

Key Responsive Features:

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

This ensures the grid automatically adjusts column count based on available space.

🔮 JavaScript Functionality

The project includes script.js with lightbox functionality (currently not connected to HTML):

Features Ready to Implement:

• Lightbox Modal: Click to view images in full size
• Navigation: Previous/next image navigation
• Keyboard Support: ESC key to close lightbox
• Overlay: Dark background overlay

To Enable Lightbox:

1. Add the lightbox HTML structure to index.html
2. Connect script.js to the HTML file
3. Add gallery-img class to images
4. Style the lightbox modal in CSS

🛠️ Customization

Adding New Images

<div class="tall"> <!-- or wide, big, or no class for regular -->
    <img src="your-image-url" alt="Description" />
</div>

Modifying Grid Layout

/* Change minimum column width */
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

/* Change row height */
grid-auto-rows: 250px;

/* Adjust gap between items */
grid-gap: 15px;

Customizing Hover Effects

/* Modify scale amount */
transform: scale(1.1);

/* Change shadow intensity */
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.4);

/* Adjust transition speed */
transition: transform 0.3s ease, box-shadow 0.3s ease;

🎯 Performance Optimizations

• Object-fit: Images maintain aspect ratio without distortion
• Optimized Images: Unsplash images with quality and size parameters
• Hardware Acceleration: CSS transforms use GPU acceleration
• Efficient Grid: Dense packing algorithm minimizes empty spaces

🌐 Browser Compatibility

• ✅ Chrome (Latest)
• ✅ Firefox (Latest)
• ✅ Safari (Latest)
• ✅ Edge (Latest)
• ⚠️ IE11 (Limited CSS Grid support)

🔮 Future Enhancements

Ready to Implement:

• Lightbox Modal: Full-size image viewing
• Image Categories: Filter by tags or categories
• Lazy Loading: Load images as they come into view
• Search Functionality: Search images by keywords
• Upload Feature: Allow users to add their own images

Advanced Features:

• Infinite Scroll: Load more images dynamically
• Favorites System: Save preferred images
• Social Sharing: Share images on social media
• Download Options: Allow image downloads
• Admin Panel: Manage gallery content

📊 Technical Specifications

CSS Grid Details:

• Auto-fit: Responsive column count
• Dense packing: Fills gaps automatically
• Minimum column width: 250px
• Row height: 200px
• Gap: 10px between items

Image Specifications:

• Format: JPEG (Unsplash optimized)
• Quality: 80%
• Responsive: Various sizes for different layouts
• Aspect Ratios: Mixed ratios for visual interest

🐛 Troubleshooting

Common Issues:

Images not loading:

• Check internet connection
• Verify Unsplash URLs are accessible
• Replace with local images if needed

Layout breaks on mobile:

• Ensure viewport meta tag is present
• Check minimum column width setting
• Test on various screen sizes

Hover effects not working:

• Verify CSS transitions are enabled
• Check for conflicting styles
• Test on different browsers

📝 License

This project is open source and available for educational purpose

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test across different browsers
5. Submit a pull request

📞 Support

For questions or issues:

• Open an issue on GitHub
• Check browser console for errors
• Verify all files are properly linked

---

*Built with ❤️ by Yuvraj Wagh