HTML5 and CSS image gallery

In this post I'm going to show you how to create a simple image gallery using CSS and the brand new HTML5 elements that mark up images and their related content. First of all, we have to make sure that Internet Explorer 8 and lower will recognize such HTML5 elements. For that purpose, we'll use the HTML5 enabling script by Remy Sharp and we'll insert it in our page through a conditional comment:

<!--[if lt IE 9]>
<script src=""></script>

Now we can build up our HTML5 structure. We'll use the figure and figcaption elements:

<div id="gallery">
    <img src="1.jpg" alt="" />
    <figcaption>Building 1</figcaption>
  <!--other figures here-->

Remember that browsers are not currently able to assign a default display role to these elements, so we should take care of this aspect too:

#gallery {
 margin: 2em auto;
 width: 60%;
 padding: 1em;
 background: #a40;
 border-top: 1em solid #e40;
 border-bottom: 1em solid #e40;
 height: 100%;
 overflow: hidden;

#gallery figure {
 float: left;
 display: block;
 width: 25%;

#gallery figure img {
 display: block;
 width: 90%;
 margin: 0 auto;
 padding: 0.5em;
 background: #f50;

#gallery figure figcaption {
 display: block;
 margin: 0.5em auto;
 width: 90%;
 padding: 0.3em;
 background: #fff;
 font: italic small Arial, sans-serif;
 text-align: center;

As you can see, this is a classic image gallery made with floats. You can see the demo below.


Live demo

Leave a Reply

Note: Only a member of this blog may post a comment.