Galería de imágenes usando CSS

El otro día vi en CSSplay una galería de imágenes usando sólo CSS, es bastante sorprendente. Me picó la curiosidad (y eché un vistazo a su código) así que después de teclear un rato, he hecho algo parecido, aunque sin ese segundo nivel de aumento, es decir, mucho más sencillo.

El ‘truco’ está en crear una capa que se active cuando se hace mouse over, es decir, cuando pasamos el puntero del ratón sobre un elemento.

.thumb:hover span {
          background-color: #333;
          visibility: visible;
          right: 0;
          top:  150px;
          left: 0px;
          z-index: 50;
          margin: 0 auto;
          width: auto;
}

Fijaos en el atributo visibility, en la clase de arriba está como visible.

.thumb span {
          position: absolute;
          top: 150px;
          left: -1000px;
          visibility: hidden;
          color: #fc7;
          font-family: "Andale mono", "Trebuchet MS", sans-serif;
          font-size: 12px;
          border-bottom: 1px dashed #666;
}

Aquí, sin embargo, visibility está como hidden, es decir que no se muestra, está oculto. Así que dependiendo de si se pasa el puntero del ratón por encima de un elemento o no, se mostrará una capa u otra.

Podéis verla en funcionamiento aquí. Y por supuesto os podéis descargar la galería completa para investigar / romper / copiar / modificar el código 🙂

PD Debería funcionar bien en todos los navegadores decentes, cumple con los estándares XHTML y CSS, pero no te me quejes si usas el Internet Explorer, eso ya no es culpa mía 😛

23 respuestas a «Galería de imágenes usando CSS»

Gracias por el aviso, Roberto. Menos mal que me lo dices porque llevaba casi un año el enlace roto… Ya está todo arreglado 🙂

pues en realidad no sé mucho de programación y eso….pero esa galeria es muy llamativa….me gusta mucho…

Acabo de comprobarlo y todos los enlaces funcionan correctamente. Vuelve a probar, Omar. Si aún así, tienes problemas, avisa y te lo mando por correo.

Hola descargue el comprimido pero al descomprimir me dice que el archivo esta dañado lo hice bajar a varios amigos y a todos os paso lo mismo.. alguna ayudita?

dey, a mí me funciona, no le veo ningún problema. Si quieres, dame tu dirección de correo y te la mando.

Adriana, el código de las páginas web no depende del sistema operativo (Windows, Linux, Mac OS, etc.), sino del navegador, que es el programa que interpreta ese código. Con lo cual, para poder usar la galería, sólo necesitas un navegador medianamente moderno (Opera, Firefox, etc.). Eso es precisamente lo bueno, así que da igual el sistema operativo que utilices 🙂

hola me gusto mucho tu galería, no hay forma de que las imágenes se queden ahí después de verlas?, ósea que no desaparezcan al sacar el mouse del thumb.Gracias.

derlis, el enlace funciona correctamente. Inténtalo de nuevo. Si sigues con problemas, avísame y te lo envío a una dirección de correo electrónico.

hola queria preguntarte como seria si deseo darle click y que la imagen se quede quieta al darle click y no al pasar el mouce por cada imagen gracias

está genial cómo se ve la galería, me funciona para mi página escolar, que me exigen se vea en por lo menos tres navegadores, incluso el explorer, gracias por compartirla! 😀

Muchas gracias, ahora que me gustaría saber como hacer para que las imágenes se fijaran, quiero decir, que cuando se haga clip se vea la imagen aunque ya no se tenga el ratón sobre ella, y también para que se vea una imagen antes de pasar el ratón por ellas.

Un saludo y muchas gracias

En contestación a dip y carlos (que se me había pasado), sí que es posible que las imágenes queden fijas. En este estilo, el efecto de «pasar el ratón por encima» (pseudoelemento :hover) está aplicado a las miniaturas, así que en el momento en que el puntero del ratón deje de estar sobre ellas, desaparecerá el efecto. La solución sería aplicar esta propiedad al contenedor de las miniaturas. En cuanto tenga tiempo, preparo otra versión con esta característica 😉

¡Gracias por los comentarios!

PD dip, me gusta el diseño de tu web. Y es todo un halago que utilices esta humilde galería en ella 😉

Espero ansiosa tu aportación, yo lo he intentado con a:active o a:visited y nada, soy incapaz de resolverlo. Me agrada que te guste el diseño, voy muy lenta porque la voy completando en mis ratos libres. Ratos libres= freelance= 0.

Gracias, hasta pronto!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *