Your rating has been changed, thanks for rating!

You have already rated this page, you can only rate it once!

This article demonstrates how to create a simple gallery using only CSS.

The most interesting part is that the gallery replaces the main picture if you click on thumbnails usually this is only possible if you use JavaScript. As a rule, only JavaScript can work with click events.

This gallery uses a trick with anchors in tags a.

HTML code

The gallery consists of two blocks of pictures. One block contains small pictures (thumbnails), and the other large ones.

The gallery can only work if all anchors are unique, like these: pic1, pic2, pic3, pic4, pic5.

<div id="gallery"> <ul id="navigation"> <li><a href="#pic1"><img alt="" src="small_nature1.jpg" /></a></li> <li><a href="#pic2"><img alt="" src="small_nature2.jpg" /></a></li> <li><a href="#pic3"><img alt="" src="small_nature3.jpg" /></a></li> <li><a href="#pic4"><img alt="" src="small_nature4.jpg" /></a></li> <li><a href="#pic5"><img alt="" src="small_nature5.jpg" /></a></li> </ul> <div id="full-picture"> <div><a name="pic1"></a><img alt="" src="large_nature1.jpg" /></div> <div><a name="pic2"></a><img alt="" src="large_nature2.jpg" /></div> <div><a name="pic3"></a><img alt="" src="large_nature3.jpg" /></div> <div><a name="pic4"></a><img alt="" src="large_nature4.jpg" /></div> <div><a name="pic5"></a><img alt="" src="large_nature5.jpg" /></div> </div> </div>

CSS code

The block with large pictures must have the width which is equal to the width of one of the large pictures. Also CSS property overflow must have hidden set as a value for this block. Pictures with anchor links must be inside of this block.

Small pictures must have links with the corresponding anchors which relate them with large pictures.

As a result, after clicking on a small picture, a corresponding large picture will be shown in another block (block with large pictures), actually, technically speaking, it will be scrolled to the corresponding picture in this block.

#gallery { width: 600px; overflow: hidden; position: relative; z-index: 1; margin: 100px auto; border: 2px solid #003C72; } #navigation { list-style: none; padding: 0; margin: 0; float: left; } #navigation li { padding: 0; margin: 0; float: left; clear: both; } #navigation li a img { display: block; border: none; } #navigation li a { display: block; } #full-picture { width: 500px; height: 375px; overflow: hidden; float: left; }

Live demo

The following archive contains the example above: