By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

CSS Image Gallery Tutorial

This Tutorial shows how to create a beautiful CSS based image gallery in HTML.

Edited: 2011-12-30 09:15

This Tutorial is using an ul to markup a beautifully aligned css image gallery with a black background. If you are making a gallery where the images are displayed in a certain order, simply use ol for the list instead.

The CSS Explained

Once you understand the css, than it will be amazingly easy to make these galleries in the future. Something like this is often something many beginners find hard.

The below is the CSS from the head section of our css gallery.

body {
  color:#fff;
  background: #000;
}
#Basement {
  width: 80%;
  min-width: 640px; /* Just make room for about 3 images per row or so */
  max-width: 1224px;
}
ul li {
  float:left;
  margin-left:1em;
  margin-bottom:1em;
  width: 173px;
  height: 200px; /* Just enough for a little text below */
}
a img {
 border:1px dotted #fff;
 width:173px;
}
li p {color:#fff;margin:0.2em 0;}

So lets cut this up into little tiny bits for you to fiddle with. :-)

The first declaration is the body:

body {
  color:#fff;
  background: #000;
}

Here we simply add a background and a text color.

Note. See also: Colors in HTML and CSS.

The next part is the #Basement division:

#Basement {
  width: 80%;
  min-width: 640px; /* Just make room for about 3 images per row or so */
  max-width: 1224px;
}

This is the main wrapper for the rest of our layout. Here on Brugbart, you will usually find that we use the #Basement for min-width, max-width, and a percentage width. The percentage width works in between the minimum and maximum widths that we declare. Another common practice is to center the layout, usually done by applying an auto margin.

Now for the main Gallery styles, the styling of the ul list:

ul li {
  float:left;
  margin-left:1em;
  margin-bottom:1em;
  width: 173px;
  height: 200px; /* Just enough for a little text below */
  list-style-type:none;
}

Here we start by floating the list item towards the left of the screen. Keep in mind, floated elements automatically gets changed to block. To also remove the list-style, numbers or points, we use the list-style-type property. Finally we just apply some margins, and a fixed width, equal to that of the snapshot images used.

The next part deals with the snapshot images themselves:

a img {
 border:1px dotted #fff;
 width:173px;
}

The default style for images inside HTML A Elements in browsers, is to display images images with a nasty blue border. Her we could either remove the border (border:0;), or we could apply our own border.

The width in this example should normally not be necessary, if your snapshots have been converted properly. This was not done with all our example images, so we just applied a quick width, to make the browser resize the images for us. Not Recommended, as images can take quite some time to download, if you don't use snapshots, or haven't converted them properly.

The final part deals with the styling of the paragraphs below the images:

li p {margin:0.2em 0;}

Full CSS Image Gallery Example

Now that we have explained the CSS of the Gallery, its time to show a fully working example. You can click the "Brugbart Vision!" Link to have a live example shown to you in your Browser.

<!DOCTYPE html>
<html lang="en-US">

  <head>
    <title>HTML Photo Gallery - Brugbart Vision</title>
    <style type="text/css">
body {
  background: #000;
}
#Basement {
  width: 80%;
  min-width: 640px; /* Just make room for about 3 images per row or so */
  max-width: 1224px;
}
ul li {
  float:left;
  margin-left:1em;
  margin-bottom:1em;
  width: 173px;
  height: 200px; /* Just enough for a little text below */
  list-style-type:none;
}
a img {
 border:1px dotted #fff;
 width:173px;
}
li p {color:#fff;margin:0.2em 0;}
    </style>
  </head>

  <body>
   <div id="Basement">
    <ul>
     <li><a href="/i/1big.png"><img src="/i/1.png" alt="Image alternative text, for text Browsers and search engines."></a><p>Picture of a Crane taken in Denmark.</p></li>
     <li><a href="/i/2big.png"><img src="/i/2.png" alt="Image alternative text, for text Browsers and search engines."></a><p>This is a picture of a semi-burned stub.</p></li>
     <li><a href="/i/3big.png"><img src="/i/3.png" alt="Image alternative text, for text Browsers and search engines."></a><p>More on the way.</p></li>
     <li><a href="/i/4big.png"><img src="/i/4.png" alt="Image alternative text, for text Browsers and search engines."></a><p>Just a day in denmark.</p></li>
     <li><a href="/i/5big.png"><img src="/i/5.png" alt="Image alternative text, for text Browsers and search engines."></a><p>Whatever.</p></li>
     <li><a href="/i/1big.png"><img src="/i/1.png" alt="Image alternative text, for text Browsers and search engines."></a><p>Picture of a Crane taken in Denmark.</p></li>
     <li><a href="/i/2big.png"><img src="/i/2.png" alt="Image alternative text, for text Browsers and search engines."></a><p>This is a picture of a semi-burned stub.</p></li>
     <li><a href="/i/3big.png"><img src="/i/3.png" alt="Image alternative text, for text Browsers and search engines."></a><p>More on the way.</p></li>
     <li><a href="/i/4big.png"><img src="/i/4.png" alt="Image alternative text, for text Browsers and search engines."></a><p>Just a day in denmark.</p></li>
     <li><a href="/i/5big.png"><img src="/i/5.png" alt="Image alternative text, for text Browsers and search engines."></a><p>Whatever.</p></li>
     <li><a href="/i/1big.png"><img src="/i/1.png" alt="Image alternative text, for text Browsers and search engines."></a><p>Picture of a Crane taken in Denmark.</p></li>
     <li><a href="/i/2big.png"><img src="/i/2.png" alt="Image alternative text, for text Browsers and search engines."></a><p>This is a picture of a semi-burned stub.</p></li>
     <li><a href="/i/3big.png"><img src="/i/3.png" alt="Image alternative text, for text Browsers and search engines."></a><p>More on the way.</p></li>
     <li><a href="/i/4big.png"><img src="/i/4.png" alt="Image alternative text, for text Browsers and search engines."></a><p>Just a day in denmark.</p></li>
     <li><a href="/i/5big.png"><img src="/i/5.png" alt="Image alternative text, for text Browsers and search engines."></a><p>Whatever.</p></li>
	</ul>
   </div>
  </body>

</html>

Brugbart Vision!

See also:

  1. JavaScript fade effect