How to create a simple CSS gallery without using Java Script

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.

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;
}

Continue reading here: CSS3: multiple backgrounds

Was this article helpful?

+3 0