It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

Creating a CSS Image Gallery by Using HTML and CSS

Reading time 2 min
Published Nov 10, 2016
Updated Oct 2, 2019

TL;DR – CSS image gallery refers to a slick layout of pictures in websites.

CSS Image Gallery

CSS Image Gallery

CSS Image Gallery

CSS Image Gallery

  • HTML photo gallery means that you create a base for the gallery with only several elements: <div>, , <img>, and <a>.
  • You apply various styles by using CSS properties to modify the way image galleries look on your website.

The CSS gallery above has equal spacing, fixed sizes, and extra space for image descriptions.

Example
div.gallery {
    margin: 10px;
    border: 2px solid black;
    float: right;
    width: 200px;
}

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

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

Here are the main elements from HTML used for creating an image gallery:

HTML element Description
<div> A container element which contains images and text description
<img> An inline element which defines an image/creates space for it
<a> A hyperlink which points to a specific image

Tip: <div> elements separate box-shaped containers for both the picture and the description.

Styling Properties for Galleries

The following steps explain how the properties of CSS style image galleries:

  1. Set the margin property to indicate space between image boxes.
  2. Add a border to frame the image containers.
  3. Use float to set the alignment of elements.
  4. Add height to indicate the size of the container boxes.
  5. Then, you can add individual image properties such as defining size dimensions with width.
  6. auto value assigned to height lets images to keep their normal proportions.
  7. Design the text box for image descriptions. Specify padding to indicate the space between images and text.
  8. Assign text-align to the text box in your preferred position.
  • You can create more advanced image galleries by using JavaScript. For instance, you can set onclick to show pictures in their full size.
  • An alternative to this HTML and CSS image gallery is the Bootstrap carousel (or the slideshow of images).