Deslizador de acordeón de imagen adaptable horizontal Pure CSS

Vista prévia

Descripción

Un control deslizante de acordeón adaptable basado en CSS/CSS3 puro que le permite ampliar horizontalmente las imágenes en el desplazamiento del mouse. En pantallas pequeñas como dispositivos móviles, el deslizador de acordeón se transformará en una lista vertical de imágenes para ajustarse a su contenedor principal.

Funcionamiento

La estructura de marcado para crear un deslizador de acordeón a partir de una lista desordenada.

<div class="accordion">

<ul>


<li>



<div> <a href="#">




<h2>Title 1</h2>




<p>Description 1</p>




</a> </div>


</li>


<li>



<div> <a href="#">




<h2>Title 2</h2>




<p>Description 2</p>




</a> </div>


</li>


<li>



<div> <a href="#">




<h2>Title 3</h2>




<p>Description 3</p>




</a> </div>


</li>


<li>



<div> <a href="#">




<h2>Title 4</h2>




<p>Description 4</p>




</a> </div>


</li>


<li>



<div> <a href="#">




<h2>Title 5</h2>




<p>Description 5</p>




</a> </div>


</li>


<li>



<div> <a href="#">




<h2>Title 6</h2>




<p>Description 6</p>




</a> </div>


</li>

</ul>
</div>

Los estilos CSS básicos para el deslizador de acordeón.

.accordion {

width: 100%;

max-width: 1080px;

height: 250px;

overflow: hidden;

margin: 50px auto;
}

.accordion ul {

width: 100%;

display: table;

table-layout: fixed;

margin: 0;

padding: 0;
}

.accordion ul li {

display: table-cell;

vertical-align: bottom;

position: relative;

width: 16.666%;

height: 250px;

background-repeat: no-repeat;

background-position: center center;

transition: all 500ms ease;
}

.accordion ul li div {

display: block;

overflow: hidden;

width: 100%;
}

.accordion ul li div a {

display: block;

height: 250px;

width: 100%;

position: relative;

z-index: 3;

vertical-align: bottom;

padding: 15px 20px;

box-sizing: border-box;

color: #fff;

text-decoration: none;

font-family: Open Sans, sans-serif;

transition: all 200ms ease;
}

.accordion ul li div a * {

opacity: 0;

margin: 0;

width: 100%;

text-overflow: ellipsis;

position: relative;

z-index: 5;

white-space: nowrap;

overflow: hidden;

-webkit-transform: translateX(-20px);

transform: translateX(-20px);

-webkit-transition: all 400ms ease;

transition: all 400ms ease;
}

.accordion ul li div a h2 {

font-family: Montserrat, sans-serif;

text-overflow: clip;

font-size: 24px;

text-transform: uppercase;

margin-bottom: 2px;

top: 160px;
}

.accordion ul li div a p {

top: 160px;

font-size: 13.5px;
}

Añade imágenes de fondo al deslizador de acordeón.

.accordion ul li:nth-child(1) { background-image: url("1.jpg"); }

.accordion ul li:nth-child(2) { background-image: url("2.jpg"); }

.accordion ul li:nth-child(3) { background-image: url("3.jpg"); }

.accordion ul li:nth-child(4) { background-image: url("4.jpg"); }

.accordion ul li:nth-child(5) { background-image: url("5.jpg"); }

.accordion ul li:nth-child(6) { background-image: url("6.jpg"); }

Cree los efectos de expansión con las transformaciones CSS3.

.accordion ul:hover li { width: 8%; }

.accordion ul:hover li:hover { width: 60%; }

.accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0.4); }

.accordion ul:hover li:hover a * {

opacity: 1;

-webkit-transform: translateX(0);

transform: translateX(0);
}

Destruye el deslizador de acordeón y mostrar como una lista de imágenes cuando el tamaño de la pantalla es más pequeño que 600px.

@media screen and (max-width: 600px) {

.accordion { height: auto; }

.accordion ul li,
.accordion ul li:hover,
.accordion ul:hover li,
.accordion ul:hover li:hover {

position: relative;

display: table;

table-layout: fixed;

width: 100%;

-webkit-transition: none;

transition: none;
}

}