Ejemplos CSS

Crear una galería de imágenes solo con CSS y HTML

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (4 votos, promedio: 3,75 de 5)
Cargando...

Presentación de un código hecho de una galería de imágenes desarrollada completamente en CSS y HTML, explicada de forma que puedan realizarse las modificaciones que se deseen.

Muchas veces sucede que, por desconocer todo el potencial que ofrecen los recursos web más elementales, se aplican herramientas más complejas y que no todos los ordenadores ni todos los navegadores aceptan. CSS es una poderosa herramienta que brinda una infinidad de recursos que no siempre son bien explotados.

Un ejemplo de ello, lo hemos dado con el menú desplegable realizado completamente con CSS y HTML, sin necesidad de aplicar otros lenguajes o animaciones de ningún tipo. Este mismo tipo de recursos nos permite mostrar algunos contenidos de forma tal que simulan ser dinámicos.

El ejemplo que hoy traemos, se trata de una galería de imágenes muy sencilla, con muy poco código, como veremos más adelante, y que está basada en los mismos principios con que fue desarrollado el mencionado menú desplegable. Es más, este ejemplo es aún más sencillo. Pero no por sencillo deja de ser atractivo.

Lo que necesitaremos

Para poder realizar el ejercicio, necesitarán de algunos archivos de imagen que están contenidos en el ejemplo terminado que pueden descargar desde aquí. Luego de descargado el archivo y descomprimido, encontrarán un archivo HTML y un archivo CSS, que tienen el ejemplo ya terminado.

Junto a ellos, se encuentra una carpeta “img” que contiene todas las imágenes necesarias. Dentro de esta carpeta se encuentran dos carpetas más, llamadas “chicas” y “grandes” que son las que tienen las imágenes que utilizaremos en la galería de imágenes propiamente dicha.

El ejemplo ya terminado pueden verlo aquí.

Conceptos generales

Podríamos decir que este trabajo está basado fundamentalmente en un solo concepto, y es el de la visibilidad de las capas. Con CSS podemos determinar si una capa es visible o no mediante el empleo de la etiqueta “visibility”, que puede tener los valores visible, hidden y collapse.

La galería de imágenes constará de una serie de imágenes en miniatura (thumbnails) alineadas en forma ordenada en dos columnas. Cuando se pasa el puntero por estas imágenes, aparece en un recuadro ubicado a la derecha de estas dos columnas la imagen ampliada. Para realizar esto, debemos emplear una etiqueta y uno de sus posibles valores, que para este ejemplo es fundamental: position: absolute.

Ahora explicaremos los principios de funcionamiento. Cada par de imágenes (una imagen ampliada con su respectivo thumbnail) se encuentran formando parte del mismo ítem de lista. Cada una de estas imágenes que forman el par, tienen una clase diferente (min y max). La clase min define los atributos del thumbnail.

La clase max es la que se refiere a la imagen ampliada, y que tiene una posición absoluta y un valor “hidden” de su atributo “visibility”, lo que hace que en condiciones normales esta imagen no se encuentre visible.

Se emplea una pseudo-clase vinculada a la clase “max” (“a:hover .max”), que es la que hace que el atributo “visibility” adquiera valor “visible” cuando el puntero se posa sobre cualquier elemento que compone el ítem de la lista.

Desarrollo del ejemplo

Como pueden apreciar, para que el tema quede más claro se han definido todos los atributos CSS que están relacionados con la galería en si misma, en un archivo CSS diferente (“galería.css”) del que contiene los atributos de los restantes componentes de la página, de forma que el tema pueda verse con mayor claridad.

Estructura

En primer lugar, definiremos la estructura del menú, que consta simplemente de dos listas no ordenadas (ul), conteniendo cada una de ellas cuatro ítems (li). Las listas tienen sus atributos definidos por la clase “cat”. Como ya dijimos, cada uno de los ítems contiene dos imágenes.

Ubicación de los thumbnails

En primer lugar, debemos ubicar las imágenes en miniatura en dos columnas (cada columna es una lista diferente) y para ello debemos definir en el archivo CSS los atributos de la clase “min” que se encuentran contenidos en los ítems (li).

.cat {
list-style-type: none;
margin: 0 0 25px 10px; /* Eliminacion de viñeta en IE6 */
padding: 0px; /* Eliminacion de viñeta en IE6 */
float:left;
}
li .min {
width: 75px;
height: 64px;
padding: 6px 20px 20px 7px;
}

La primera clase define que la lista no tendrá estilo de lista, se definen los márgenes y el relleno para que se vea como queremos, y le damos el valor “left” a la propiedad “float”, de forma que ambas listas se ubiquen una al lado de la otra flotando a la izquierda. Luego, se definen los atributos de las dimensiones de cada uno de los ítems y el relleno de los mismos, en la regla “li .min”.

Imágenes grandes

Cuando vemos el ejemplo que hemos desarrollado hasta aquí, vemos que se nos presenta un gran espacio en blanco que solo aparecerá cubierto por las imágenes grandes cuando el puntero se pose sobre los thumbnails. Es por esta razón, que incorporamos una imagen que contendrá un mensaje con instrucciones para el usuario, de forma tal que todo el espacio quedará cubierto.

Esto lo realizamos empleando una capa con posicionamiento absoluto, y cuyos atributos aparecen definidos en el archivo CSS con el identificador “#base”:

#base {
width: 410px;
height: 310px;
border: solid 1px #ccc;
position: absolute;
top: 250px; /* Provoca la separacion del borde superior */
left: 500px; /* Separa la imagen grande de la pequeña */
background: url(img/galeria.png);
}

Como vemos, tiene un ancho y una altura definidos. Como hemos querido agregar un borde que aparecerá separado 5px a cada lado de la imagen, las dimensiones son 10px más grandes que las de las imágenes. A su vez, esta capa tiene una imagen de relleno, que es la que se presenta cuando ninguna de las imágenes de la galería está visible.

Ahora solo resta definir el posicionamiento de las imágenes grandes, así como su condición de visibilidad, por lo que definiremos a todos los elementos contenidos dentro de un ítem de lista con la clase “.max”.

li .max{
visibility: hidden;
position: absolute;
top: 256px; /* Provoca la separacion del borde superior */
left: 506px; /* Separa la imagen grande de la pequeña */
}

Como vemos, se define que en condiciones normales estos elementos (imágenes) estarán no visibles. La posición (top y left) son seis pixeles más que los de la capa “#base”, debido al relleno de 5px por lado que hemos definido y al borde de 1px que tiene dicha capa.

A continuación, mediante el empleo de una pseudo-clase, haremos que la capa sea visible cuando el puntero se pose sobre cualquier elemento con enlace contenido dentro del ítem de lista:

a:hover .max {
visibility: visible;
}

El ejemplo ya terminado pueden verlo aquí.

Conclusión

Como pueden ver, el ejemplo es extremadamente sencillo. Se puede ampliar, colocar una mayor cantidad de columnas, modificar las posiciones o cualquier otra cosa que su imaginación les dicte, sin mayores dificultades.

17 respuestas

  1. Lo primero felicitaros por el excelente articulo. Hos descubri hoy y veo que teneis cosas de interes, que ire descubriendo.
    Me llamo Miguel, y tenia un pregunta.
    La cosa es que estoy constuyendo un sitio web y quiero añadir una galeria de imagenes. Esta forma esta genial, pero queria poner la galeria directamente en una pagina, se vean las imagenes y una vez se pincha se vean a pantalla completa.
    La cosa es si tienes un ejemplo para lo que busco.
    Muchas gracias por bustro trabajo.
    Un saludo.

  2. Mediante el atributo a:hover vemos como al pasar el puntero del ratón por encima de las fotos pequeñas aparecen en grande en la parte derecha. Pero si quiero que ocurra lo mismo pero haciendo click sobre las imágenes pequeñas, cómo se haría?

    Muchas gracias.

  3. gracias por compartir conocimiento, llevo 2 días buscando como hacer una galería y tu ejemplo es el mejor de la web tienen una excelente página saludos.

  4. Hola que tal,

    Antes que nada excelente tutorial! Sin embargo me deja con una duda… Como puedo hacer que en lugar de que sea al pasar el mouse sea al darle click (a:active) y la imagen (max) se quede hasta que se le de click a otra?

    Mil gracias

    Francisco Q.

  5. Hola amigo, me gustó mucho la página que sale con ese archivo que descargué.

    Bueno, la pregunta es, ¿Puedo editarlo y subirlo a mi hosting, haciendo una página web con ése código?, bueno, si es que no se puede, lo entiendo.

    Saludos, y gracias por el tutorial!

  6. Hola, buenísimo el tutorial, ya lo apliqué en la web y funciona muy bien!

    Quisiera saber si se puede agregar un texto que aparezca debajo de cada imagen grande (.max)

    Es decir que al pasar el puntero por la imagen en miniatura, aparezca la imagen en grande y un texto debajo de esa imagen grande, que será diferente en cada una. Muchas gracias!

  7. Hola, estuve leyendo los artículos de tu página, y son demasiado, me han ayudado un montón, este y otro artículo acerca de menúes desplegables y rollover. En ninguna parte conseguí entender nada, sino aquí. Sigue así, hay mucha gente que aprecia trabajos como el tuyo!

  8. Hola, he leído varios posts vuestros para hacer el sitio Web y me han servido de mucho, se agradece.
    Pero tengo una consulta y les pido perdón si es que ya está respondida en algún lado, pero la verdad que si es así, no lo encuentro. Tengo el problema que al hacer mi sitio, tengo dos columnas, y resulta que en la de la izquierda tengo todo banners y demás, y en la de la derecha tengo el contenido escrito que corresponde a cada pestaña (botón), y el gran problema es que cada vez que escribo a la derecha, la columna de la izquierda se me desacomoda, y se me va para abajo, quedando todo un espacio blanco encima.
    ¿Tenéis idea de cómo solucionarlo? siempre tengo el mismo problema y no logro encontrar la solución. Aclaro que tengo el sitio hecho con una DWT a la cual están unidas todas las páginas. Les pido por favor si pueden ofrecerme una respuesta porque me estoy volviendo loca. Muchas gracias.

  9. Hola Sandra:

    Es cierto que el artículo dice que el archivo comprimido contendría dos archivos CSS. Y es que en un principio pensé en dejar separadas las reglas relativas al funcionamiento de la galería, pero luego lo agregué al archivo único y olvidé modificar el artículo.

    El archivo comprimido, como podrás ver contiene todo lo necesario y la galería funciona perfectamente.
    Un cordial saludo.

  10. Hola, no le entendí muy bien, bueno bajé el archivo comprimido pero en el texto dice que deberían de ser dos archivos de .css y uno html pero en la carpeta descomprimida nada mas viene uno de .css y uno html y las fotos. Mi duda es que si falta el otro archivo o el código esta completo? Saludos.

Deja una respuesta