🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

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 Jan 21, 2020

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.

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

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).