Efecto de Acordeón con Imágenes en CSS

Comparteme :

En esta oportunidad, te mostraré como realizar un acordeón con imágenes como presentación con CSS y HTML, tan solo siga mis pasos.

Demostración
1ero. Ingresamos con nuestra cuenta a blogger
2do. No vamos a la plantilla y buscamos esto ]]></b:skin> Justo arriba de éste pegamos el código CSS que les dejo a continuación:

.ia-container {
width: 535px;
overflow: hidden;
box-shadow: 1px 1px 4px #52e052;
border: 7px solid #52e052;
}
.ia-container figure {
position: absolute;
top: 0;
left: 50px;
width: 335px;
box-shadow: 0 0 0 1px rgba(255,255,255,0.6);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.ia-container > figure {
position: relative;
left: 0 !important;
}
.ia-container img {
display: block;
width: 100%;
}
.ia-container input {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 100%;
cursor: pointer;
border: 0;
padding: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
z-index: 100;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.ia-container input:checked{
width: 5px;
left: auto;
right: 0px;
}
.ia-container input:checked ~ figure {
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
left: 335px;
}
.ia-container figcaption {
width: 100%;
height: 100%;
background: rgba(87, 73, 81, 0.1);
position: absolute;
top: 0px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.ia-container figcaption span {
position: absolute;
top: 40%;
margin-top: -30px;
right: 20px;
left: 20px;
overflow: hidden;
text-align: center;
background: rgba(87, 73, 81, 0.3);
line-height: 20px;
font-size: 18px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
text-transform: uppercase;
letter-spacing: 4px;
font-weight: 700;
padding: 20px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
} 
.ia-container input:checked + figcaption,
.ia-container input:checked:hover + figcaption{
background: rgba(87, 73, 81, 0);
}
.ia-container input:checked + figcaption span {
-webkit-transition: all 0.4s ease-in-out 0.5s;
-moz-transition: all 0.4s ease-in-out 0.5s;
-o-transition: all 0.4s ease-in-out 0.5s;
-ms-transition: all 0.4s ease-in-out 0.5s;
transition: all 0.4s ease-in-out 0.5s;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
filter: alpha(opacity=99);
opacity: 1;
top: 50%;
}
.ia-container #ia-selector-last:checked + figcaption span {
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.ia-container input:hover + figcaption {
background: rgba(87, 73, 81, 0.03);
}
.ia-container input:checked ~ figure input{
z-index: 1;
}
@media screen and (max-width: 720px) {
.ia-container { 
width: 540px; 
}
.ia-container figure { 
left: 40px; 
width: 260px; 
}
.ia-container input { 
width: 40px; 
}
.ia-container input:checked ~ figure { 
left: 260px; 
}
.ia-container figcaption span { 
font-size: 16px; 
}
}
@media screen and (max-width: 520px) {
.ia-container { 
width: 320px; 
}
.ia-container figure { 
left: 20px; 
width: 180px; 
}
.ia-container input { 
width: 20px; 
}
.ia-container input:checked ~ figure { 
left: 180px; 
}
.ia-container figcaption span { 
font-size: 12px; 
letter-spacing: 2px; 
padding: 10px; 
margin-top: -20px; 
} 
}
figure {
margin: 0;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
}

3ro. Abrimos una entrada en su blog o en cualquier parte donde desee instalar el Acordeón de imágenes y añadimos el siguiente código HTML que les dejo a continuación

<div class="ia-container">
<figure>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnFB0VJMa_sxpqiaFQN92Ib3FvokZzG1G2orUKE7zeh6y4fYShsnOIhunFA78QPwMDQdlnFxI1a7Bho8Qle73Tl3ZbBWVyywfN1H4_nVvIY3KnZqUcykcutKCCyP8pcurj21iF9pBiH18/w335-h480-no/Faceblog+Evolutions+%25282%2529.jpg" alt="faceblog evolutions" />
<input type="radio" name="radio-set" checked="checked"/>
<figcaption><span>Cecilia Cheung 1</span></figcaption>
<figure>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDuxZixQXqKEpuXxK68RwXzZ0XsQxZHb8YqkVgT2ZO8d99kEr-YAYPAfaxQmdBJF2zcoY-XssNBpHj2huwOi76m_Z_bs-pFUxqc8ROOUoFY-tYcg5VUIsHvmtKA-FGHM07oCO3EPYwQB4/w335-h480-no/Faceblog+Evolutions+%25283%2529.jpg" alt="faceblog evolutions" />
<input type="radio" name="radio-set" />
<figcaption><span>Cecilia Cheung 2</span></figcaption>
<figure>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5EPZfAWLPf404yOBttXkSIy5h9K6IOILrAk3HDuGqWfE7nA-07_9ORHXRCj4Qm7o2sQOJkRoDrC_mNdPVvzAtRp7mQJTTKb557kvweSeBuF19sPRGOEcu3i9x0O3WGPVWIncuF4QXHx0/w335-h480-no/Faceblog+Evolutions+%25284%2529.jpg" alt="faceblog evolutions" />
<input type="radio" name="radio-set" />
<figcaption><span>Cecilia Cheung 3</span></figcaption>
<figure>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_1rg_H06Jfqm9ETVU0g-RTZok0ggygawSSgDfcm0f2hmKin7TLNW6kkxzmaBNKbpAb1witjS0sS5T6T2SaL5YvPg0ND4SNl5ZvnhBS2G4ex4Y1QLuVORRrczX0jnfoshv0SsFPSI7hh0/w335-h480-no/Faceblog+Evolutions+%25281%2529.jpg" alt="faceblog evolutions" />
<input type="radio" name="radio-set" />
<figcaption><span>Cecilia Cheung 4</span></figcaption>
<figure>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPA-oWpBD9PqIpeSIOyJozldAxIZkLlWGu5ijhIj8ipKw6qAkPMuDhqcpSwvp0lVGOQJ8QcijuX2LEvexwDeYC6YsezsYFepnZxfZWObW6xvYHY8l_ZuHzbtySs6762Ve2QyPQ8_KLoio/w335-h480-no/Faceblog+Evolutions+%25285%2529.jpg" alt="faceblog evolutions" />
<input type="radio" name="radio-set" />
<figcaption><span>Cecilia Cheung 5</span></figcaption></figure>
</figure>
</figure>
</figure>
</figure>
</div>

Recuerda: Puedes poner tus propias imágenes con sus respectivos nombres

Demostración

Comparteme :

Author : Bloguero Tutorial

Soy el creador y editor de éste blog, cree este blog porque me encanta escribir sobre tecnología e internet, diseño web, y recursos para webmasters y Bloggers. Además, mi único propósito, es divertirme y de paso si ayudo a otras personas, mucho mejor. , click aquí ?

Efecto de Acordeón con Imágenes en CSS.

Comparte

BLOGUERO TUTORIAL