Create a beautiful image gallery using HTML and CSS

by Jay Mistry · May 13, 2020

Web-Development

Today, we will learn how to create a cool image gallery using plain old HTML and CSS. You can also watch the video tutorial on YouTube.

index.html

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>3D CSS Animation</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="gallery">
      <div
        class="image wide"
        style="background-image: url(http://unsplash.it/id/10/300/150);"
      ></div>
      <div
        class="image"
        style="background-image: url(http://unsplash.it/id/20/300/300);"
      ></div>
      <div
        class="image"
        style="background-image: url(http://unsplash.it/id/30/300/300);"
      ></div>
      <div
        class="image tall"
        style="background-image: url(http://unsplash.it/id/40/150/300);"
      ></div>
      <div
        class="image"
        style="background-image: url(http://unsplash.it/id/50/300/300);"
      ></div>
      <div
        class="image"
        style="background-image: url(http://unsplash.it/id/60/300/300);"
      ></div>
      <div
        class="image"
        style="background-image: url(http://unsplash.it/id/70/300/300);"
      ></div>
    </div>
  </body>
  </html>

This is our HTML file which contains our content for the website. We are using Unsplash as our dummy image provider. The div with class gallery acts as our container for the gallery. Other divs with class image act as images. We are using background-image style property of divs to display and animate the images. Other classes used to change the aspect ratio of images displayed are wide and tall.

style.css

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #222;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gallery {
  padding: 20px;
  border: 2px solid #ababab;
  border-radius: 20px;
  width: 460px;
  display: grid;
  gap: 5px;
  grid-template-columns: 150px 150px 150px;
  grid-template-rows: 150px 150px 150px;
  grid-auto-flow: dense;
}

.image {
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  filter: grayscale(100%) opacity(0.5);
  transition: 0.25s ease-out;
}

.image.tall {
  grid-area: span 2 / auto;
}

.image.wide {
  grid-area: auto / span 2;
}

.image:hover {
  filter: grayscale(0%) opacity(1);
  background-size: 135%;
}

The styles for body are to set default padding, margin and box-sizing. We also set the background color, and use flex property to display our gallery in the center.

For the gallery container div, we set styles for .gallery, where we specify grid properties for our gallery container. We set the gap to 5px. We have 3 columns and 3 rows of 150px set using properties grid-template-rows and grid-template-columns. The property grid-auto-flow automatically arranges the grid items in a manner where no empty space is left due to different aspect ratios.

The .image selector targets the divs which will act as our images. Here we set the filter property to display the image black and white, and a little transparent using value grayscale(100%) opacity(0.5). Also, the transition property has a duration of 0.25s and easing function ease-out.

There are two more aspect ratios for our images, which we specify using .tall and .wide selectors. We use the grid-area property to size our images.

Test out the code on Codepen

See the Pen Image gallery using HTML CSS by Tech no Kami (@technokami) on CodePen.