My Gallery 📸
A responsive and visually appealing image gallery built using HTML5 and CSS3. The gallery showcases images in a flexible grid layout with smooth hover effects, grayscale-to-color transitions, and animated captions.
🚀 Features Responsive gallery layout using Flexbox Smooth hover animations Grayscale to color image transition Image captions displayed on hover Modern card-based design Shadow and scaling effects for enhanced user experience Clean and simple UI 🛠️ Technologies Used HTML5 CSS3 Flexbox
📂 Project Structure My Gallery/ │ ├── index.html ├── styles.css ├── favicon.ico │ └── Images/ ├── image1.jpg ├── image2.jpg ├── image3.jpg ├── ... └── image15.jpg
🎨 Design Highlights Gallery Layout Images are arranged in a three-column flexible grid. Cards automatically wrap to the next row when needed. Hover Effects Images are displayed in grayscale by default. Hovering over an image restores its original colors. Cards slightly enlarge and display a shadow effect. Captions fade in with a gradient background overlay. Styling Features Rounded image corners Smooth transitions Drop shadows for depth Gradient caption overlay
📸 Preview +-----------+ +-----------+ +-----------+ | Image 1 | | Image 2 | | Image 3 | +-----------+ +-----------+ +-----------+
+-----------+ +-----------+ +-----------+ | Image 4 | | Image 5 | | Image 6 | +-----------+ +-----------+ +-----------+
Or use the VS Code Live Server extension:
📚 Learning Outcomes
This project helped in understanding:
Flexbox layouts CSS positioning Hover effects and transitions Image filters Responsive web design concepts CSS gradients and shadows
🔮 Future Improvements Fully responsive mobile design Lightbox image viewer Category filtering Masonry grid layout Dark mode support Dynamic image loading using JavaScript
👨💻 Author
Built as part of Web Development practice to strengthen HTML and CSS fundamentals.
⭐ If you like this project, consider giving it a star on GitHub!