CSS Image Gallery
CSS Image Library
CSS The image gallery is created using
<html>
<head>
<style>
.image-gallery {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
}
.image-gallery img {
width: 25%;
height: 250px;
}
</style>
</head>
<body>
<div class="image-gallery">
<img src="https://coder-cafe.com/wp-content/uploads/2025/09/images/red-flower.jpg" alt="Red Flower"> <img src="https://coder-cafe.com/wp-content/uploads/2025/09/images/white-flower.jpg" alt="White Flower">
<img src="https://coder-cafe.com/wp-content/uploads/2025/09/images/orange-flower.jpg" alt="Orange Flower">
</div>
</body>
</html>
Responsive Image Gallery with Hover Effects
You can use hover effects to create a simple yet functional image gallery. When the user hovers over an image, the image will expand and have a red border.
Here is an example:
<html>
<head>
<style>
.image-gallery {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
}
.image-gallery .image-item {
width: 30%;
text-align: center;
}
.image-gallery img {
width: 100%;
height: 220px;
transition: transform 0.2s;
}
.image-gallery .image-item:hover {
transform: scale(1.1);
border: 3px solid red;
}
.image-description {
margin-top: 10px;
}
</style>
</head>
<body>
<h3>Hover over the https://coder-cafe.com/wp-content/uploads/2025/09/images to see the effect</h3>
<div class="image-gallery">
<div class="image-item">
<img src="https://coder-cafe.com/wp-content/uploads/2025/09/images/red-flower.jpg" alt="Red Flower">
<div class="image-description">Red Flower</div>
</div>
<div class="image-item">
<img src="https://coder-cafe.com/wp-content/uploads/2025/09/images/white-flower.jpg" alt="White Flower">
<div class="image-description">See</div>
</div>
<div class="image-item">
<img src="https://coder-cafe.com/wp-content/uploads/2025/09/images/orange-flower.jpg" alt="Orange Flower">
<div class="image-description">Orange Flower</div>
</div> </div>
</body>
</html>
Creating an Image Gallery with Media Queries
You can use CSS media queries to create a responsive image gallery that scales and rearranges content based on screen width, providing an optimal viewing experience across different devices and screen sizes. On smaller screens, https://coder-cafe.com/wp-content/uploads/2025/09/images will appear wider and have more spacing.
Grammar
@media [media query] {
/* CSS rules to apply if the media query matches */
}
Here is an example –
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.image-gallery {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
}
.image-gallery .image-item {
width: 30%;
text-align: center;
}
.image-gallery img {
width: 100%;
height: 220px;
transition: transform 0.2s;
}
.image-gallery .image-item:hover {
transform: scale(1.1);
border: 3px solid red;
}
.image-description {
margin-top: 10px;
}
@media only screen and (max-width: 800px) {
.image-gallery .image-item {
width: 40%;
margin: 20px;
}
}
@media only screen and (max-width: 300px) {
.image-gallery .image-item {
width: 100%;
margin: 20px;
} }
</style>
</head>
<body>
<h3>Hover over the https://coder-cafe.com/wp-content/uploads/2025/09/images to see the effect</h3>
<div class="image-gallery">
<div class="image-item">
<img src="https://coder-cafe.com/wp-content/uploads/2025/09/images/red-flower.jpg" alt="Red Flower">
<div class="image-description">Red Flower</div>
</div>
<div class="image-item">
<img src="https://coder-cafe.com/wp-content/uploads/2025/09/images/white-flower.jpg" alt="White Flower">
<div class="image-description">See</div>
</div>
<div class="image-item">
<img src="https://coder-cafe.com/wp-content/uploads/2025/09/images/orange-flower.jpg" alt="Orange Flower">
<div class="image-description">Orange Flower</div>
</div>
<div class="image-item">
<img src="https://coder-cafe.com/wp-content/uploads/2025/09/images/red-flower.jpg" alt="Red Flower">
<div class="image-description">Red Flower</div>
</div>
<div class="image-item">
<img src="https://coder-cafe.com/wp-content/uploads/2025/09/images/white-flower.jpg" alt="White Flower">
<div class="image-description">See</div>
</div>
<div class="image-item">
<img src="https://coder-cafe.com/wp-content/uploads/2025/09/images/orange-flower.jpg" alt="Orange Flower">
<div class="image-description">Orange Flower</div>
</div>
</div>
</body>
</html>