Responsive Image Gallery with CSS

Objective

Learning how to use CSS Grid or Flexbox to create responsive layouts, and solidify concepts of media queries and image responsiveness.

Instructions

1. HTML Structure:

   • Create a container that holds multiple images.
   • Each image should be wrapped in a <div> or directly inside the container.

2. CSS Layout:

   • Use CSS Grid or Flexbox to create a gallery with multiple columns.
   • Ensure that the number of columns dynamically changes based on the screen size:
     • On mobile screens, display a single column.
     • On tablets, display two or three columns.
     • On desktops, display four or more columns.

3. Responsive Design:

   • Use media queries to make the gallery responsive.
   • Ensure that images are resized proportionally to fit within the columns.

4. Bonus:

   • Add a hover effect to each image, such as zoom-in or darken overlay.
   • Add smooth transitions to the hover effect for a polished experience.

Solution

Here's an example of a Responsive Image Gallery using Flexbox.

1. HTML Structure:

<div class="gallery">
  <div class="gallery-item">
    <img src="https://via.placeholder.com/300" alt="Image 1">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/300" alt="Image 2">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/300" alt="Image 3">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/300" alt="Image 4">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/300" alt="Image 5">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/300" alt="Image 6">
  </div>
</div>

css

body {
  font-family: Arial, sans-serif;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.gallery-item {
  flex: 1 1 calc(33.333% - 20px); /* 3 columns on large screens */
  margin-bottom: 10px;
  box-sizing: border-box;
}

.gallery img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

/* Hover effect */
.gallery img:hover {
  transform: scale(1.05);
}

/* Responsive for tablets */
@media (max-width: 768px) {
  .gallery-item {
    flex: 1 1 calc(50% - 20px); /* 2 columns on tablets */
  }
}

/* Responsive for mobile */
@media (max-width: 480px) {
  .gallery-item {
    flex: 1 1 100%; /* 1 column on small screens */
  }
}

Adding hover effect

Here’s the updated Responsive Image Gallery with hover effects added for a more polished look. The hover effect will enlarge the image slightly and add a semi-transparent overlay.

<div class="gallery">
  <div class="gallery-item">
    <img src="https://via.placeholder.com/300" alt="Image 1">
    <div class="overlay">Image 1</div>
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/300" alt="Image 2">
    <div class="overlay">Image 2</div>
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/300" alt="Image 3">
    <div class="overlay">Image 3</div>
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/300" alt="Image 4">
    <div class="overlay">Image 4</div>
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/300" alt="Image 5">
    <div class="overlay">Image 5</div>
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/300" alt="Image 6">
    <div class="overlay">Image 6</div>
  </div>
</div>

css

body {
  font-family: Arial, sans-serif;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.gallery-item {
  position: relative;
  flex: 1 1 calc(33.333% - 20px); /* 3 columns on large screens */
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: 8px;
}

.gallery img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

/* Hover effect: Zoom-in on image */
.gallery-item:hover img {
  transform: scale(1.1);
}

/* Overlay styling */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-size: 20px;
  border-radius: 8px;
}

/* Show overlay on hover */
.gallery-item:hover .overlay {
  opacity: 1;
}

/* Responsive for tablets */
@media (max-width: 768px) {
  .gallery-item {
    flex: 1 1 calc(50% - 20px); /* 2 columns on tablets */
  }
}

/* Responsive for mobile */
@media (max-width: 480px) {
  .gallery-item {
    flex: 1 1 100%; /* 1 column on small screens */
  }
}