🔥Limited Offer: Get 50% OFFon AI & Full Stack Courses🔥
Back to CSS Notes
Topic #95

CSS Image Gallery

CSS Notes · CodingNow 2.02 min readSource

A CSS image gallery is a collection of images that is displayed in an organized, and often responsive way, on a web page.

Here we use CSS to create an image gallery:

The HTML structure for an image gallery is:

  • A container element to wrap the entire gallery (like a
    with class="gallery").
  • Another container element for each image (like a
    with class="gallery-item"), that contains the tag and possibly a description.

Here is the HTML and CSS code:

Example

<html>

<head>

<style>
div.gallery {
  display: flex;
  flex-wrap:
  wrap;
  justify-content: flex-start;
}

  div.gallery-item {
  margin: 5px;
  border: 1px solid #ccc;

  width: 180px;
}

div.gallery-item:hover {
  border: 1px solid #777;
}

  div.gallery-item img {
  width: 100%;
  height: auto;
}

  div.gallery-item div.desc {
  padding: 15px;
  text-align:
  center;
}

</style>

</head>

<body>

  <div class="gallery">

<div class="gallery-item">
  <a
  target="_blank" href="img_5terre.jpg">
    <img
  src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

  </a>
  <div class="desc">Cinque Terre</div>
</div>

<div
  class="gallery-item">
  <a target="_blank" href="img_forest.jpg">

  <img src="img_forest.jpg" alt="Forest" width="600" height="400">

  </a>
  <div class="desc">Green Forest</div>
</div>

<div class="gallery-item">

  <a target="_blank" href="img_lights.jpg">
    <img
  src="img_lights.jpg" alt="Northern Lights" width="600" height="400">

  </a>
  <div class="desc">Northern Lights</div>
</div>

<div class="gallery-item">

  <a target="_blank" href="img_mountains.jpg">
    <img
  src="img_mountains.jpg" alt="Mountains" width="600" height="400">

  </a>
  <div class="desc">Mountains</div>
</div>

</div>

</body>

</html>

Tip: We have used display: flex; for the image gallery above. This layout module is effective for arranging images in rows or columns. You will learn more about CSS Flexbox later in our CSS Tutorial.

Here we use CSS media queries to re-arrange the images on different screen sizes:

  • If screen is larger than 768px wide - show four images side by side
  • If screen is smaller than 768px - show two images side by side
  • If screens is smaller than 480px - stack the images vertically (width: 100%)

Tip: You will learn more about media queries later in our CSS Tutorial.

Example

<img src="responsiveImgGallery.jpg" style="width:100%"/>
PreviousAdvanced DropdownsNext CSS Image Sprites

Want to go beyond the notes?

Join CodingNow 2.0's CSS course — live mentorship, real projects, and 100% placement support.

Enroll Now — Free Demo Available

CSS Image Gallery – FAQs

Quick answers about learning CSS Image Gallery in CSS.

This free note from CodingNow 2.0 explains CSS Image Gallery in CSS — concept, syntax and worked code examples you can copy, run and revise before interviews.
Yes. Every CSS topic on CodingNow 2.0, including CSS Image Gallery, is 100% free with no signup required.
With focused practice, most students grasp CSS Image Gallery in 1–3 days from these notes; pairing it with CodingNow 2.0's mentor-led course takes you to job-ready depth faster.
Use the code examples in this note, then ask doubts for free on the CodingNow 2.0 Community (/community) — expert instructors answer within 24 hours.
WhatsApp
Call NowEnroll Now