Simple Tab Gallery with Pure CSS / CSS3

Category: CSS & CSS3 , Gallery | November 11, 2015
Author: Razzbrazz
Views Total: 7,976 views
Official Page: Go to website
Last Update: November 11, 2015
License: MIT

Preview:

Simple Tab Gallery with Pure CSS / CSS3

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

You Might Be Interested In:


Leave a Reply