5ThirtyOne

After having grown tiresome of the flash solution which I had made use of for quick gallery previews in the portfolio, I decided to return to the basics with a CSS based image gallery. Plain-vanilla CSS using relative & absolute positioning to achieve a clean scriptless gallery.

For the following tutorial, we’ll construct a simple two image model using two thumbnail images, and their respective full image previews:

<div id="image_gallery">
<ul id="gallery_thumbs">
<li><a class="thumb" href="#tb"><img src="/img/thmb.gif" alt="thmb" /><span><img src="/img/lrg1.gif" alt="prvw" /></span></a></li>
<li><a class="thumb" href="#tb"><img src="/img/thmb.gif" alt="thmb" /><span><img src="/img/lrg2.gif" alt="prvw" /></span></a></li>
</ul>
</div>

Using the above structure, we now have a gallery container designated by #image_gallery, and a basic unordered list with the thumbnails and associated full previews wrapped with <span> tags to hide using CSS.

#image_gallery {
position: relative;
overflow: hidden;
}
ul#gallery_thumbs {
list-style: none;
margin: 0;
padding: 0;
}
#gallery_thumbs li {
background: none;
display: inline;
}
.thumb img { /* styles thumbnail previews */
background: #fff;
padding: 2px;
border: 1px solid #ddd;
}
.thumb:hover img {
background-color: transparent;
}
.thumb span { /* hides large previews */
visibility: hidden;
position: absolute;
}
.thumb span img { /* styles large previews */
background: #fff;
padding: 2px;
border: 1px solid #ddd;
}
.thumb:hover span { /* displays preview while hovering over thumb */
visibility: visible;
top: 80px; /* absolute positioning to control where previews are displayed */
left: 0;
z-index: 100;
}

Now that we have the basic HTML & CSS, we can now experiment with styling a gallery to match.