En esta entrada 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: ¿Cómo hacer una simple galería responsive con CSS 1?; 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: