Creating a Pure CSS Image Gallery with Descriptions

Today we are going to create a pure CSS image gallery, including a description of each image, from scratch. There are many advantages to using a CSS image gallery as opposed to a JavaScript gallery. For one, you need not worry about learning JavaScript or finding a quality script, and you also needn’t worry if the user has JavaScript Disabled. One of the original pure CSS image galleries may be found at CSS Play, which features a CSS gallery with the images on the bottom and no descriptions.

For this gallery, we will build a gallery with images on the left and text that describes the photo on hover. You may view the final outcome here.

-

What we will need…

Before we start coding we will need a few things to prepare for our gallery, we will need:

• 6 Images, 3 for the thumbnails, 3 full size.
• The thumbnails need to be the same size for our example (150×100), and it will be very helpful if the full size pictures are also the same size (400×300).
• Note:Your images do not need to be the same size as above, this is just the sizes we will be using below for the example. You can easily edit a few of the CSS properties to make this effect work for whatever size image you desire.

-

Building the CSS

First we will set the style rules for the body and general img tags of our page. It is important to set the margin and paddings to 0 on our images, as well as take off any borders that may be applied by default:

body {
color:#333333;
margin:0px;
padding:0px;
}
img {
border:none;
padding:0px;
margin:0px;
}

Next, we will set the CSS for our UL tag we will call “gallery”. First, the width and height are set to the same size as our full size images (400×300). We then position the element to “relative”, set the background color (I also used a nice little image with a reflection, this is just for looks), and center the UL with auto margins.

ul#gallery {
width:400px;
height:300px;
position:relative;
background:#E1E1E1 url("imagegallery.png") no-repeat scroll 50% 40%;
list-style-type:none;
list-style-position:outside;
margin:0px auto;
padding:0px;
}

Now we need to set the CSS for our thumbnails (will be the LI tags), and change the thumbnails to a block display. You will notice we pull our LI tags -150px to the left. Remember our thumbnails are 150 pixels wide, thus we need to pull them -150px left so they do not interfere with our full size images:

ul#gallery li {
padding:0px;
margin:0px 0px 0px -150px;
}
ul#gallery li img {
display:block;
padding:0px;
margin:0px;
}

Were about halfway done. We would like our thumbnails to display the full size images only when the user hovers over them, so lets set our CSS for the thumbnails accordingly:

ul#gallery li a span {
display:none;
}

Now for when the user hovers over the thumbnail, this is where the real work is done. First we will set the width and height of our full size images (400×300). Remember how we set the UL position to relative? Well, now we will use absolute positioning to our advantage. We will position the top left corner of the image to the top left of the image box. Next we will change the display for our span tag to block. Now when a user hovers over a thumbnail, the full size image will display in the appropriate section:

ul#gallery li a:hover span {
position:absolute;
width:400px;
height:300px;
top:0;
left:0;
display:block;
border:none;
}

Lastly, we want a way to have a description about the photo that is being hovered over. We will follow the same pattern as we did for the images for this effect. First we will set the display to none, so that no description is given unless the user hovers over the image. We will use the em tags to hold our descriptions:

ul#gallery li a span em {
display:none;
}

Next we will set the CSS to display our descriptions when hovered. We use absolute positioning like before, and position the text -300px to the left (our thumbnails our -150px to the left, thus, the -300). We set the width to 150px (so the text does not run into images). Now we will set a height using min height. Why use a height you ask for text? Because using a height will allow the user to hover or highlight desired text, and allow you to create different colored “column effects”. We have to hack the min height for IE as noted below in the code.

ul#gallery li a:hover span em {
position:absolute;
width:150px;
min-height:300px;
height:auto !important;/**Min height hack for IE**/
height:300px;/*Needs to match min-height pixels above*/
top:0px;
left:-300px;
display:block;
color:#333333;
text-decoration:none;
}

You got all that? Good, because we are done with our CSS! Now for the HTML setup, seen below:

<h1>Pure CSS Image Gallery</h1>

<!--Below is the HTML you will need!-->
<ul id="gallery">
<li><a href="http://creatingdrew.com"><img src="sunset_small.jpg" alt="sunset" /><span><img src="sunset.jpg" alt="whale" />
<em>Chicks dig sunsets!</em></span></a></li>
<li><a href="http://creatingdrew.com"><img src="grasshopper_small.jpg" alt="cricket" /><span><img src="grasshopper.jpg" alt="grasshopper" />
<em>Patience grasshopper...</em></span></a></li>
<li><a href="http://creatingdrew.com"><img src="rose_small.jpg" alt="rose" /><span><img src="rose.jpg" alt="rose" />
<em>This is a picture of a rose!</em></span></a></li>
</ul>

<!--End the required HTML-->

Now simply upload all the images, your page and your CSS and your done.

-

Demo

Here is a Demo page, feel free to view the source to better understand if you need to. If you are going to use this exact code, I ask that you please link back to CreatingDrew.com.

-

Need help?

If you need help, please post your questions in the Help Developer forum where you are likely to get a full and detailed response. Enjoy your new pure CSS image gallery!