Cómo crear una Galería de Imágenes en Html5 y Css3

En este artículo os voy a enseñar a crear una galería de imágenes en Html5 y CSS3 de una forma sencilla y rápida.

Una de las principales tareas a la hora de crear una página web es disponer de una galería de imágenes para mostrar nuestros trabajos o servicios.

Esta tarea que en principio parece sencillo puede complicarse sobre todo a la hora de que se muestren de formar responsiva, es decir, que se adapten a todos los dispositivos.

Para ello vamos a trabajar con HTML5 y CSS3 sin necesidad de implementar jQuery.

Galería de Imágenes con Html5 y CSS3

En primer lugar vamos a comenzar con nuestro archivo HTML5 para ello vamos a crear capa para cada fotografía y posteriormente agregaremos las imágenes.

El tamaño no debe de preocuparte porque ya nos encargaremos a la hora de aplicarle los estilos de configurar el tamaño de cada ventana.

Vamos a explicar un poco el código para que no te resulte muy complicado y sobre todo para que entiendas su funcionamiento.

Lo que hemos hecho ha sido crear un conjunto de cuadrículas o grids donde irán nuestras imágenes o fotografías acompañadas de un título y una descripción.

Las imágenes puedes utilizarlas de cualquier banco de imágenes gratuitos, o utilizar placeholder.com que nos permite crear imagenes de diferentes tamaños.

Muy importante no olvidar enlazar el archivo .css con los estilos de nuestra galería que podrás modificar a tu antojo.

CSS para dar estilo a nuestra galería de imágenes

En el CSS vamos a agregar los diferentes estilos a nuestra galería de imágenes en Html5 y Css3.

Destacar principalmente que cada vez que pasamos el ratón por cada una de las imágenes, éstas saldrán desde diferentes posiciones que tu puedes elegir.

Para este ejemplo he usado las más comunes.

Para que nuestra galería sea responsive utilizamos @media para que se adaptate a las diferentes resoluciones de pantalla.

Así mismo y como ya os comenté anteriormente nos encargamos de definir el tamaño de nuestra cuadrícula así como la posición en la que aparece la animación del título y la descripción.

Y con esto ya tenemos configurada y creada nuestra galería de imagenes en html5 y css3. ¿Fácil verdad?

Espero que te hay resultado de gran utilidad el crear una galería con fotografías en html y sobre todo que aprendas el código y lo modifiques para adaptarlo a tus necesidades. ¡Gracia!