Agregando Titulos (captions) a una galeria realizada con Foundation Clearing

Implemente en una plantilla de Wordpress, que usa el plugin "legacy nextgen gallery", un álbum de galerías usando para el despliegue el componente de javascript que contiene Foundation de Zurb.
La idea era que el álbum de galerías se desplegara de forma horizontal, empezamos creando un lienzo:

<div class="row">
    <div class="large-4 columns">
    </div>
    <div class="large-4 columns">
    </div>
    <div class="large-4 columns">
    </div>
</div>

Lo siguiente es colocar el código de nuestra galería en cada una de las zonas que acabamos de crear:

<ul class="clearing-thumbs clearing-feature" data-clearing>
  <li class="clearing-featured-img"><a href="http://placehold.it/750x350&text=1"><img src="http://placehold.it/750x350&text=1" data-caption="My Caption"></a></li>
  <li><a href="http://placehold.it/750x350&text=2"><img src="http://placehold.it/750x350&text=2" data-caption="My Caption"></a></li>
  <li><a href="http://placehold.it/750x350&text=3"><img src="http://placehold.it/750x350&text=3" data-caption="My Caption"></a></li>
</ul>

El resultado lo podemos ver en Codepen: http://cdpn.io/ykjBe



De esta manera estamos creando un álbum, que cuenta con 3 galerías, que se desplegaran en el ancho y alto de la pantalla:



Lo siguiente sera colocar un titulo a cada una de las galerias, tenemos que cambiar el codigo para utilizar las etiquetas de html FIGURE y FIGCAPTION:

   1:  <div class="row">

   2:  <div class="large-4 small-4 columns">

   3:  <ul class="clearing-thumbs clearing-feature" data-clearing>

   4:    <li class="clearing-featured-img"><a href="http://placehold.it/750x350&text=1">

   5:      <figure class="figure-caption"><img src="http://placehold.it/750x350&text=1" data-caption="My Caption"><figcaption>Image 1</figcaption></figure>

   6:      </a></li>

   7:    <li><a href="http://placehold.it/750x350&text=2"><figure class="figure-caption"><img src="http://placehold.it/750x350&text=2" data-caption="My Caption"><figcaption>Image 2</figcaption></figure></a></li>

   8:    <li><a href="http://placehold.it/750x350&text=3"><figure class="figure-caption"><img src="http://placehold.it/750x350&text=3" data-caption="My Caption"><figcaption>Image 3</figcaption></figure>></a></li>

   9:  </ul>

  10:    </div>

  11:  <div class="large-4 small-4 columns">

  12:  <ul class="clearing-thumbs clearing-feature" data-clearing>

  13:    <li class="clearing-featured-img"><a href="http://placehold.it/750x350&text=4">

  14:      <figure class="figure-caption"><img src="http://placehold.it/750x350&text=4" data-caption="My Caption"><figcaption>Image 4</figcaption></figure>

  15:      </a></li>

  16:    <li><a href="http://placehold.it/750x350&text=5"><figure class="figure-caption"><img src="http://placehold.it/750x350&text=5" data-caption="My Caption"><figcaption>Image 5</figcaption></figure></a></li>

  17:    <li><a href="http://placehold.it/750x350&text=6"><figure class="figure-caption"><img src="http://placehold.it/750x350&text=6" data-caption="My Caption"><figcaption>Image 6</figcaption></figure>></a></li>

  18:  </ul>

  19:    </div>

  20:    <div class="large-4 small-4 columns">

  21:  <ul class="clearing-thumbs clearing-feature" data-clearing>

  22:    <li class="clearing-featured-img"><a href="http://placehold.it/750x350&text=7">

  23:      <figure class="figure-caption"><img src="http://placehold.it/750x350&text=7" data-caption="My Caption"><figcaption>Image 7</figcaption></figure>

  24:      </a></li>

  25:    <li><a href="http://placehold.it/750x350&text=8"><figure class="figure-caption"><img src="http://placehold.it/750x350&text=8" data-caption="My Caption"><figcaption>Image 8</figcaption></figure></a></li>

  26:    <li><a href="http://placehold.it/750x350&text=9"><figure class="figure-caption"><img src="http://placehold.it/750x350&text=9" data-caption="My Caption"><figcaption>Image 9</figcaption></figure>></a></li>

  27:  </ul>

  28:    </div>

  29:  </div>

El resultado de lo anterior es lo siguiente:



Cierto que no se ve muy agradable, aprovechando que ya utilizamos las etiquetas FIGURE y FIGCAPTION, agregamos un poco de estilo:

   1:  figure {

   2:    display: block;

   3:    position: relative;

   4:    float: left;

   5:    overflow: hidden;

   6:    margin: 0 20px 20px 0;

   7:    width:100%;

   8:  }

   9:  figcaption {

  10:    position: absolute;

  11:    background: black;

  12:    background: rgba(0,0,0,0.75);

  13:    color: white;

  14:    padding: 10px 20px;

  15:    margin:0px;

  16:    opacity: 0;

  17:    -webkit-transition: all 0.6s ease-out;

  18:    -moz-transition:    all 0.6s ease-out;

  19:    -o-transition:      all 0.6s ease-out;

  20:    transition:      all 0.6s ease-out;

  21:  }

  22:  figure:hover figcaption {

  23:    opacity: 1;

  24:  }

  25:  .figure-caption:before { bottom: 10px; left: 10px; }

  26:  .figure-caption figcaption { left: 0; bottom: -30%;}

  27:  .figure-caption:hover figcaption { bottom: 0px; }

Tendremos el siguiente resultado de aplicar el estilo, con una pequeña transición en la FIGCAPTION:

Finalmente un arreglo para el navegador de Firefox e Internet Explorer:

li{
  width:100%;
}

Codigo final en Codepen http://cdpn.io/CgJDq

Listo!