Selected Reading
Q&A

CSS - Image Gallery

CSS image gallery is a collection of images that is displayed using CSS. CSS can be used to control the layout of the images, their size, spacing, and other visual properties.

CSS image galleries are commonly used on websites to display products, portfolios, or other visual content in a visually appealing way.

The following example shows a simple image gallery layout that is displayed in a row −

<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="images/red-flower.jpg" alt="Red Flower">
      <img src="images/white-flower.jpg" alt="White Flower">
      <img src="images/orange-flower.jpg" alt="Orange Flower">
   </div>
</body>
</html>

Responsive Image Gallery With a Hover Effect

You can make a simple and effective image gallery with a hover effect. When the user hovers over an image, it will become larger and have a red border added to it.

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 images to see the effect</h3>
   <div class="image-gallery">
      <div class="image-item">
         <img src="images/red-flower.jpg" alt="Red Flower">
         <div class="image-description">Red Flower</div>
      </div>
      <div class="image-item">
         <img src="images/white-flower.jpg" alt="White Flower">
         <div class="image-description">See</div>
      </div>
      <div class="image-item">
         <img src="images/orange-flower.jpg" alt="Orange Flower">
         <div class="image-description">Orange Flower</div>
      </div>
   </div>
</body>
</html>

Image Gallery using Media Query

You can use CSS media queries to create a responsive image gallery that scales and rearranges its content based on the screen width, providing an optimal viewing experience on different devices and screen sizes. On smaller screens, the images will be wider and more spaced apart.

Syntax

@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 images to see the effect</h3>
   <div class="image-gallery">
      <div class="image-item">
         <img src="images/red-flower.jpg" alt="Red Flower">
         <div class="image-description">Red Flower</div>
      </div>
      <div class="image-item">
         <img src="images/white-flower.jpg" alt="White Flower">
         <div class="image-description">See</div>
      </div>
      <div class="image-item">
         <img src="images/orange-flower.jpg" alt="Orange Flower">
         <div class="image-description">Orange Flower</div>
      </div>
      <div class="image-item">
         <img src="images/red-flower.jpg" alt="Red Flower">
         <div class="image-description">Red Flower</div>
      </div>
      <div class="image-item">
         <img src="images/white-flower.jpg" alt="White Flower">
         <div class="image-description">See</div>
      </div>
        <div class="image-item">
         <img src="images/orange-flower.jpg" alt="Orange Flower">
         <div class="image-description">Orange Flower</div>
      </div>
   </div>
</body>
</html>