top of page
Search

How to Create an Image Gallery in CSS

This is the most basic type of gallery where smaller versions of images, called thumbnails, are displayed in a grid with zoom-in and zoom-out features.


Code

<!DOCTYPE html>
<html>
<head>
<style>
.thumbnail-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.thumbnail {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border: 5px solid #fff;
  box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.3);
}

.thumbnail:hover {
  border: 5px solid #aaa;
}

.thumbnail img {
  width: 100%;
  height: 80%;
  transition: transform 0.5s;
}

.thumbnail:hover img {
  transform: scale(1.2);
}

.thumbnail p {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 10px;
  background-color: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 14px;
  text-align: center;
}
</style>
</head>
<body>
<div class="thumbnail-gallery">
  <div class="thumbnail">
    <a href="image1.jpg">
      <img src="https://static.wixstatic.com/media/0f65e1_e90e11e81d0347848ab813685a214073~mv2.jpg" alt="Image 1">
    </a>
    <p>Russia</p>
  </div>
  <div class="thumbnail">
    <a href="image2.jpg">
      <img src="https://static.wixstatic.com/media/0f65e1_905f33ef5e0249e39bb914f252035a1d~mv2.jpg" alt="Image 2">
    </a>
    <p>Antartica</p>
  </div>
  <div class="thumbnail">
    <a href="image3.jpg">
      <img src="https://static.wixstatic.com/media/0f65e1_5741febfc90842fd9348064f5225e959~mv2.jpg" alt="Image 3">
    </a>
    <p>Rome</p>
  </div>
  <div class="thumbnail">
    <a href="image4.jpg">
      <img src="https://static.wixstatic.com/media/0f65e1_10e5126d03864369be6d1154552e997b~mv2.jpg" alt="Image 4">
    </a>
    <p>Switzerland</p>
  </div>
    <div class="thumbnail">
    <a href="image4.jpg">
      <img src="https://static.wixstatic.com/media/0f65e1_386d90c9ecb1403eaf62f5d8981f1f16~mv2.jpg" alt="Image 4">
    </a>
    <p>Africa</p>
  </div>
    <div class="thumbnail">
    <a href="image4.jpg">
      <img src="https://static.wixstatic.com/media/0f65e1_003941efd9c7467eaf5f39ca22646d2c~mv2.jpg" alt="Image 4">
    </a>
    <p>India</p>
  </div>
  
</div>
</body>
</html>

Output:


The HTML code creates a div with the class "thumbnail-gallery" and four divs with the class "thumbnail". Each "thumbnail" div contains an anchor tag with the path to the full-sized image and an image tag with the path to the thumbnail image. It also contains a paragraph tag with a short description of the image.


The CSS code styles the "thumbnail-gallery" div to display its child elements as a flexbox with a centred alignment and a gap of 20 pixels between each element. Each "thumbnail" div is positioned relatively with a fixed width and height, an overflow set to hide, and a stylish border. On hover, the border changes its colour. The image tag within the "thumbnail" div is styled to be displayed at 100% width and auto height, and on hover, it will scale to 1.2 times its original size. Lastly, the paragraph tag within the "thumbnail" div is positioned absolutely at the bottom and has a semi-transparent background colour with white text.


0 comments
bottom of page