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: