Галерея для сайта на CSS3 (В виде табов)

Реализация простой, но в тоже время функциональной галереи в виде вкладок (табов) с помощью CSS3

Как реализовать:

1. Разметка html

<li>
<input type="radio" name="select" id="mtb">
<div class="item-hugger">
<div class="title">MTB</div>
<img class="thumb-image" src="#" />
<label for="mtb"></label>
</div></p>
<div class="content">
<div class="item-wrapper">
<img src="#" />
<div class="title">Mtb</div>
</div>
</div>
</li>

Это один из контейнеров, в который мы поместили как превью изображения, так и большую картинку.

2. Подключаем стили CSS

.thumbnails {
list-style: none;
font-size: 0;
margin-left: -2%;
li {
display: inline-block;
width: 23%;
margin-left: 2%;
text-align: center;
vertical-align: middle;
}
li:hover {
.item-hugger {
background: white;

.title {
color: #000;
}
}
}
input[name="select"] {
display: none;
}
.item-hugger {
position: relative;
height: 140px;
margin: 20px 0;
background: #f2f2f2;
transition: all 150ms ease-in-out;
}
label {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: pointer;
}
.title {
padding: 20px 0 0;
font-size: 18px;
color: #555;
transition: all 150ms linear;
}
.thumb-image {
height: 100px;
padding: 20px 0;
}
.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;
.title {
font-size: 60px;
font-weight: 400;
display: inline-block;
color: #555;
border-bottom: 6px solid #fe7701;
padding: 50px 10px 0;
text-transform: uppercase;
}
}
input[name="select"]:checked + .item-hugger {
height: 180px;
margin: 0;
background: white;
}
input[name="select"]:checked ~ .content {
opacity: 1;
}
}

.white-box {
background: white;
height: 500px;
}

Готово.