Simple Tab Gallery with Pure CSS / CSS3

Preview:

Description:

A CSS only gallery that enable the user to switch between images by clicking on the tabbed thumbnail navigation. Built using CSS3 flexbox model, transitions, transforms and html radio input tricks.

How to use it:

Add images and navigation thumbnails to the gallery.

<div class="container">
  <ul class="thumbnails">
    <li>
      <input type="radio" name="select" id="image1">
      <div class="item-hugger">
        <div class="title">Image 1</div>
        <img class="thumb-image" src="thumb-1.jpg" />
        <label for="image1"></label>
      </div>
      <div class="content">
        <div class="item-wrapper"> 
          <img src="1.jpg">
          <div class="title">Image 1</div>
        </div>
      </div>
    </li>
    <li class="is-active">
      <input type="radio" name="select" id="image2" checked>
      <div class="item-hugger">
        <div class="title">Image 2</div>
        <img class="thumb-image" src="thumb-2.jpg" />
        <label for="image2"></label>
      </div>
      <div class="content">
        <div class="item-wrapper">
          <img src="2.jpg" />
          <div class="title">Image 2</div>
        </div>
      </div>
    </li>
    <li>
      <input type="radio" name="select" id="image3">
      <div class="item-hugger">
        <div class="title">Image 3</div>
        <img class="thumb-image" src="thumb-3.jpg" />
        <label for="image3"></label>
      </div>
      <div class="content">
        <div class="item-wrapper">
          <img src="3.jpg" />
          <div class="title">Image 3</div>
        </div>
      </div>
    </li>
    <li>
      <input type="radio" name="select" id="image4">
      <div class="item-hugger">
        <div class="title">Image 4</div>
        <img class="thumb-image" src="thumb-4.jpg" />
        <label for="image4"></label>
      </div>
      <div class="content">
        <div class="item-wrapper">
          <img src="4.jpg" />
          <div class="title">Image 4</div>
        </div>
      </div>
    </li>
  </ul>
  <div class="white-box"></div>
</div>

The primary CSS / CSS3 rules for the gallery.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body { height: 100%; }
body { position: relative; }
img {
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #e8e8e8;
  font-family: 'helvetive neue', sans-serif;
  font-weight: 700;
}
.container {
  width: 600px;
  position: relative;
}
.thumbnails {
  list-style: none;
  font-size: 0;
  margin-left: -2%;
}
.thumbnails li {
  display: inline-block;
  width: 23%;
  margin-left: 2%;
  text-align: center;
  vertical-align: middle;
}
.thumbnails li:hover .item-hugger { background: white; }
.thumbnails li:hover .item-hugger .title { color: #000; }
.thumbnails input[name="select"] { display: none; }
.thumbnails .item-hugger {
  position: relative;
  height: 140px;
  margin: 20px 0;
  background: #f2f2f2;
  transition: all 150ms ease-in-out;
}
.thumbnails label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
}
.thumbnails .title {
  padding: 20px 0 0;
  font-size: 18px;
  color: #555;
  transition: all 150ms linear;
}
.thumbnails .thumb-image {
  height: 100px;
  padding: 20px 0;
}
.thumbnails .content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 600px;
  height: 500px;
  padding: 50px;
  opacity: 0;
  transition: all 150ms linear;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.thumbnails .content .title {
  font-size: 60px;
  font-weight: 400;
  display: inline-block;
  color: #555;
  border-bottom: 6px solid #fe7701;
  padding: 50px 10px 0;
  text-transform: uppercase;
}
.thumbnails input[name="select"]:checked + .item-hugger {
  height: 180px;
  margin: 0;
  background: white;
}
.thumbnails input[name="select"]:checked ~ .content { opacity: 1; }
.white-box {
  background: white;
  height: 500px;
}