Pure CSS expansión de diapositivas

Vista prévia

Descripción

Una presentación de expansión CSS/CSS3 pura que le permite expandir un elemento de proyección de diapositivas en el mouse. Comportamientos como un acordeón.

Funcionamiento

Agregue elementos de bloque a la proyección de diapositivas.

<div class="block image1">

<div class="layer"></div>

<div class="p-container">


 <p class="img-p"> Description 1 </p>

 </div>
</div>

<div class="block image2">

<div class="layer"></div>

<div class="p-container">


 <p class="img-p"> Description 2 </p>

 </div>
</div>

<div class="block image3">

<div class="layer"></div>

<div class="p-container">


 <p class="img-p"> Description 3 </p>

 </div>
</div>

Los estilos CSS primarios para la proyección de diapositivas.

.block {

width: 10%;

height: 300px;

display: inline-block;

background-color: #E83F6F;

cursor: pointer;

position: relative;

-webkit-transition: width .5s ease-in-out, background-color .5s ease-in-out;

-moz-transition: width .5s ease-in-out, background-color .5s ease-in-out;

-ms-transition: width .5s ease-in-out, background-color .5s ease-in-out;

-o-transition: width .5s ease-in-out, background-color .5s ease-in-out;

transition: width .5s ease-in-out, background-color .5s ease-in-out;

text-align: center;
}

.block:hover {

background-color: #2274A5;

width: 30%;

-webkit-transition: width .5s ease-in-out, background-color .5s ease-in-out;

-moz-transition: width .5s ease-in-out, background-color .5s ease-in-out;

-ms-transition: width .5s ease-in-out, background-color .5s ease-in-out;

-o-transition: width .5s ease-in-out, background-color .5s ease-in-out;

transition: width .5s ease-in-out, background-color .5s ease-in-out;
}

.block:hover .img-p {

opacity: 1;

-webkit-transition: opacity .5s .51s ease-in-out;

-moz-transition: opacity .5s .51s ease-in-out;

-ms-transition: opacity .5s .51s ease-in-out;

-o-transition: opacity .5s .51s ease-in-out;

transition: opacity .5s .51s ease-in-out;
}

.block:hover .layer {

opacity: .5;

-webkit-transition: opacity .5s ease-in-out;

-moz-transition: opacity .5s ease-in-out;

-ms-transition: opacity .5s ease-in-out;

-o-transition: opacity .5s ease-in-out;

transition: opacity .5s ease-in-out;
}

.layer {

position: absolute;

left: 0;

top: 0;

bottom: 0;

right: 0;

background-color: #000;

width: 100%;

height: 100%;

opacity: 0;
}

.img-p {

position: absolute;

font-size: 16px;

opacity: 0;

color: #FFF;

text-align: left;

line-height: 1.6em;
}

.p-container {

width: 80%;

position: relative;

top: 35%;

margin-left: 5%;
}

Añada imágenes de fondo a los elementos de bloque.

.image1 {

background-image: url(1.jpg);

-webkit-background-size: cover;

-o-background-size: cover;

background-size: cover;

background-repeat: no-repeat;

background-position: center center;
}

.image2 {

background-image: url(2.jpg);

-webkit-background-size: cover;

-o-background-size: cover;

background-size: cover;

background-repeat: no-repeat;

background-position: center center;
}

.image3 {

background-image: url(3.jpg);

-webkit-background-size: cover;

-o-background-size: cover;

background-size: cover;

background-repeat: no-repeat;

background-position: center center;
}

Haga que la proyección de diapositivas responda.

@media (max-width: 768px) {

.block {

width: 100%;

height: 200px;

-webkit-transition: height .5s ease-in-out;

-moz-transition: height .5s ease-in-out;

-ms-transition: height .5s ease-in-out;

-o-transition: height .5s ease-in-out;

transition: height .5s ease-in-out;
}

.block:hover {

width: 100%;

height: 400px;

-webkit-transition: height .5s ease-in-out;

-moz-transition: height .5s ease-in-out;

-ms-transition: height .5s ease-in-out;

-o-transition: height .5s ease-in-out;

transition: height .5s ease-in-out;
}
}

@media (min-width: 768px) {

.block { width: 15%; }

}

@media (min-width: 992px) {

.block { width: 10%; }

}