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

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (1 votos, promedio: 5,00 de 5)
Cargando…

También te podría gustar...

Sobre este artículo

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (1 votos, promedio: 5,00 de 5)
Cargando…

Licencia: Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

URL: LaWebera.es :: Diseño Web

Diseñador web y gráfico afincado en Uruguay. Ha trabajado como freelance para empresas de toda Latinoamérica y España. Apasionado del diseño y autodidacta por naturaleza, gran parte de lo que sabe lo ha aprendido de sitios como este.

17 Respuestas

  1. Miguel Espeso

    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. Sergio

    Muy buen articulo esta todo claro y sencillos, muchas gracias

  3. Missel

    Muy bueno el ejemplo, gracias por compartir este magnifico ejemplo.
    Mil gracias.

  4. raquel

    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.

  5. fabiola

    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.

  6. jose n

    hola, como se hace para que las miniaturas estén mas juntas, que el espacio entre ellas sea menor

  7. Francisco

    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.

  8. José.

    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!

  9. piso13

    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!

  10. Jesús

    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!

  11. Victoria

    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.

  12. Cosme

    Me encantó, gracias!

  13. Andrés Fernández

    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.

  14. Sandra

    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 un comentario

El email no se publica. Todos los campos obligatorios, salvo Web.

Usamos cookies propias y de terceros para mejorar nuestros servicios, realizar el análisis de la navegación de los usuarios y mostrar publicidad según tus preferencias y hábitos de navegación. Si continúas navegando, las aceptas. Puede cambiar la configuración u obtener más información aquí

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar