CSS Image Gallery
CSS-Image-Gallery:
Creating an image gallery in CSS involves arranging a set of images on a web page and styling them to provide a visually appealing and user-friendly experience. Here's a step-by-step guide on how to create a simple CSS image gallery:
HTML Structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Image Gallery</title>
</head>
<body>
<div class="gallery">
<div class="image">
<img src="image1.jpg" alt="Image 1">
<div class="overlay">
<p>Image 1</p>
</div>
</div>
<div class="image">
<img src="image2.jpg" alt="Image 2">
<div class="overlay">
<p>Image 2</p>
</div>
</div>
<!-- Add more image entries as needed -->
</div>
</body>
</html>
CSS (styles.css):
<style>
/* Style the gallery container */
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
/* Style individual images */
.image {
position: relative;
margin: 10px;
overflow: hidden;
}
/* Style image overlays */
.overlay {
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
color: white;
width: 100%;
height: 100%;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.3s ease;
}
/* Style image captions */
.overlay p {
margin: 0;
}
/* Add a hover effect to the images */
.image:hover .overlay {
opacity: 1;
}
/* Style the images themselves */
.image img {
width: 100%;
height: auto;
transition: transform 0.3s ease;
}
/* Add a hover effect to scale the images */
.image:hover img {
transform: scale(1.05);
}
</style>
In this example:
We have a simple HTML structure with a div container for the image gallery. Inside the gallery container, we place individual image div elements, each containing an img tag for the image and a div with an overlay for the caption.
CSS is used to style the gallery container, individual images, overlays, and captions. The overlays are initially hidden with opacity: 0, and they become visible with a smooth fade-in effect when the user hovers over the images.
Hover effects are applied to both the overlays and the images themselves for a visually pleasing user experience. When hovering over an image, it scales up slightly and reveals the caption.
You can add more image entries by duplicating the image div elements and updating the image source and caption as needed.
