¿Cómo hacer una simple galería responsive con CSS?

En esta entrada veremos como hacer una simple galería responsive empleando un poco de CSS y nada más; la galería está compuesta de imágenes y una breve descripción sobre las mismas:

A continuación, la tabla de contenido:

• Definiendo la estructura (HTML).
• Definiendo el Estilo (CSS).
• Resultado final.

Definiendo la estructura (HTML)

Primero definimos la estructura básica que tendrá la galería; en otras palabras, el HTML:

       <div id="container">
                <div>
                    <img src="img/arya-stark.jpg"/>
                    <span>Arya Stark</span>
                </div>
                .
                .
                .
                <div>
                    <img src="Imagen"/>
                   <span>Descpición</span>
                </div>
            </div>

Explicando el código HTML anterior:

• El div con identificador #container no es más que el contenedor en la cual va a estar alojada la galería en otras palabras, las imágenes y las breves descripciones.
• Cada div hijo de #container contiene una imagen y su descripción; a su vez este div representan los componentes de la galería, debe haber uno por cada imagen que se desee registrar.

Definiendo el Estilo (CSS)

Ahora es el turno de la presentación para la galería, en otras palabras el CSS, veamos algunos aspectos claves:

• Empleamos el selector hermano provisto en CSS para seleccionar los span al mismo nivel y adyacentes a las imágenes:

  #container div img + span{
  .
  .
  .
    opacity:0;
  }
          

  Indicando que la descripción permanecerá oculta (opacity:0) hasta que se posicione el cursor encima de la imagen (:hover) y se muestre la descripción (span):

  #container div img:hover + span{
    opacity:1;
  }
          

  Se emplea la propiedad opacity para ocultar y mostrar la descripción de la imagen en vez de otras propiedades como display o visibility porque con la propiedad opacity se logra un efecto progresivamente para mostrar las descripciones y para enderezar las imágenes. Como podrás darte cuenta, todos los efectos emplean las llamadas Transiciones en CSS.

• Por defecto, se muestran tres imágenes por filas; pero, se se pueden adaptar fácilmente para mostrar más o menos imágenes por filas con la ayuda de los media query:

              @media (min-width:1600px){
                  #container div{
                      width: 15%;
                  }
              }
  }
          

Resultado final

Puedes visualizar y descargar el código completo de la galería en los siguientes enlaces:

¿Cómo hacer una simple galería responsive con CSS?

Veremos como hacer una simple galería responsive empleando un poco de CSS y nada más; esta entrada representa una variación del ejercicio anterior.; la galería estará compuesta de imágenes y descripciones, pero el efecto empleado al momento de que el usuario coloque el cursor encima de las imágenes es diferente:

A continuación, la tabla de contenido:

• Definiendo la estructura (HTML).
• Definiendo el Estilo (CSS).
• Resultado final.

Definiendo la estructura (HTML)

Definimos la estructura básica que tendrá la galería; en otras palabras, el HTML:

       <div id="container">
                <div>
                    <img src="img/arya-stark.jpg"/>
                    <span>Arya Stark</span>
                </div>
                .
                .
                .
                <div>
                    <img src="Imagen"/>
                   <span>Descpición</span>
                </div>
            </div>

Si leyó la entrada anterior podrá darse cuenta de que el código HTML es exactamente el mismo:

• El div con identificador #container no es más que el contenedor en la cual va a estar alojada la galería en otras palabras, las imágenes y las breves descripciones.
• Cada div hijo de #container contiene una imagen y su descripción; a su vez estos divs representan los componentes de la galería, debe haber uno por cada imagen que se desee registrar.

Definiendo el Estilo (CSS)

El CSS tiene variaciones respecto al utilizado en la galería del ejercicio anterior:

• De igual manera, ocultamos la descripción adyacentes a las imágenes:

  #container div img + span{
  .
  .
  .
    opacity:0;
  }
          

  #container div img:hover + span{
    opacity:1;
  }
          

  Ocultando la descripción con la propiedad opacity para luego mostrarla progresivamente con las Transiciones de CSS.

• Por defecto, se muestran tres imágenes por filas; pero, se se pueden adaptar fácilmente para mostrar más o menos imágenes por filas con la ayuda de los media query:

              @media (min-width:1600px){
                  #container div{
                      width: 15%;
                  }
              }
  }
          

Resultado final

Puedes visualizar y descargar el código completo de la galería en los siguientes enlaces: