Galería de pestañas simple con CSS puro/CSS3

Vista prévia

Descripción

Una galería de CSS solo que permite al usuario cambiar entre imágenes haciendo clic en la navegación en miniatura con pestañas. Construido usando el modelo de Flexbox CSS3, transiciones, transformaciones y trucos de entrada de radio HTML.

Funcionamiento

Añade imágenes y miniaturas de navegación a la galería.

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

Las reglas principales de CSS/CSS3 para la galería.

* {

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