Gallery Creation in HTML and CSS: A Complete Guide
Creating an image gallery in HTML and CSS is an essential skill for web developers and designers. A well-structured gallery enhances the visual appeal of a website and improves user experience. In this guide, we will explore how to build a responsive image gallery using HTML and CSS.
1. Basic HTML Structure for an Image Gallery
The first step in creating a gallery is setting up the HTML structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="gallery">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<img src="image4.jpg" alt="Image 4">
</div>
</body>
</html>
This structure consists of a <div> container that holds multiple <img> elements representing gallery images.
2. Styling the Gallery with CSS
Now, let’s style our gallery to make it visually appealing.
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
max-width: 800px;
padding: 10px;
}
.gallery img {
width: 100%;
height: auto;
border-radius: 5px;
transition: transform 0.3s;
}
.gallery img:hover {
transform: scale(1.05);
}
Key CSS Features Used:
grid-template-columns: Creates a responsive grid layout.gap: Adds spacing between images.border-radius: Softens the corners of images.transition: Adds a smooth zoom effect on hover.
3. Making the Gallery Responsive
To ensure the gallery adapts to different screen sizes, we use the following CSS:
@media (max-width: 600px) {
.gallery {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
}
This media query adjusts the image sizes for smaller screens.
4. Adding a Lightbox Effect with JavaScript
A lightbox effect allows users to click on an image to view it in a larger size.
<div id="lightbox" class="lightbox">
<span class="close">×</span>
<img class="lightbox-content" id="lightbox-img">
</div>
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
justify-content: center;
align-items: center;
}
.lightbox-content {
max-width: 90%;
max-height: 90%;
}
document.querySelectorAll('.gallery img').forEach(img => {
img.addEventListener('click', function() {
document.getElementById('lightbox').style.display = 'flex';
document.getElementById('lightbox-img').src = this.src;
});
});
document.querySelector('.close').addEventListener('click', function() {
document.getElementById('lightbox').style.display = 'none';
});
This JavaScript snippet enables the lightbox functionality, making the gallery interactive.
5. Conclusion
Creating an image gallery in HTML and CSS is simple yet powerful. By adding CSS for styling and JavaScript for interactivity, you can make a visually engaging and user-friendly gallery. Try experimenting with different layouts and effects to create a unique design.
In the next guide, we will explore Bootstrap and how it can simplify web development!
Kushagra Kumar Mishra
Latest posts by Kushagra Kumar Mishra (see all)
- Responsive Design in HTML & CSS - February 12, 2025
- Image Carousel in HTML - February 12, 2025
- JavaScript in HTML: The Basics - February 12, 2025
Recent Comments