Acordeón de Imágenes con CSS

Una moda muy común ahora en día es la utilización de sliders de imágenes en los sites, lo que sin duda le da un toque muy elegante y vistoso. Pero la incorporación de un slider demanda la utilización de complicado código Java.


Pues una alternativa seria usar imágenes en miniatura o fragmentos que al colocar el puntero encima nos muestre la imagen en tamaño completo, Pero esto también no implicaría la utilización de código Java? la respuesta a esta pregunta es NO!
Ya que podemos conseguir este efecto con solo un poco de código CSS. Aqui esta como podemos hacerlo:

Paso 1

Para conseguir el efecto utilizaremos una tabla, entonces lo primero que debemos hacer es definir las propiedades de esta:

.acordeon {
   border-collapse:collapse;
   padding:0px;
   margin:0px auto;
   width:690px;
   height:20px;
   box-shadow: 0 0 10px #333;
}

Paso 2

Una vez tengamos esto, lo que haremos sera definir la etiqueta td de la tabla, que serán las casillas que contendrán las imágenes. Para esto definimos el siguiente codigo:

.acordeon td {
   padding:0;
   width:136px;
   height:117px;
   border:2px solid #fff;
   -moz-transition: 0.7s;
   -ms-transition: 0.7s;
   -o-transition: 0.7s;
   -webkit-transition: 0.7s;
   transition: 0.7s;
}

Paso 3

Ahora, con esto tenemos las propiedades básicas de la celda, pero tenemos que definir algo diferente para cada celda, entonces hacemos esto:

.acordeon td.p1 {
   background:url(RUTA IMAGEN 1) no-repeat center center;}
.acordeon td.p2 {
   background:url(RUTA IMAGEN 2) no-repeat center center;}
.acordeon td.p3 {
   background:url(RUTA IMAGEN 3) no-repeat center center;}
.acordeon td.p4 {
   background:url(RUTA IMAGEN 4) no-repeat center center;}
.acordeon td.p5 {
   background:url(RUTA IMAGEN 5) no-repeat center center;}

....

Paso 4

Esta propiedad la podemos definir tantas veces como querramos o necesitemos.
Ahora solo falta establecer las propiedades del :hover, añadimos este codigo:

.acordeon td {
   width:50px;
   height:50px;
}

.acordeon tr:hover td {
   height:320px;
}

.acordeon td:hover {
   width:480px;
   height:320px;
}

Y... esto seria todo el código CSS que tendríamos que escribir, ahora solo falta la implementación. Para hacer esto realizamos los siguientes pasos:

1. Crear una nueva tabla
2. Asignarle a la tabla la clase acordeon
3. Asignarle a cada celda (etiqueta td) de la tabla una de las propiedades creadas en el tercer paso

Y eso seria todo, aqui una pequeña previsualización:
Solo tienen que ir jugando con los tamaños, la cantidad de celdas, colores , etc.