Estoy desarrollando una galería de imágenes y quiero mostrar títulos en la parte inferior de una imagen de la siguiente manera:

La imagen se muestra sin texto por defecto

Al pasar el mouse sobre la imagen, aparece un título (posiblemente truncado) en la parte inferior sobre un fondo semitransparente gris oscuro

Preferiblemente, mi HTML permanece como está; Lo más importante es que las imágenes permanecen como 'pantalla: bloque en línea', ya que así es como se necesitan para el diseño.

(Opcional) Al pasar el cursor sobre el título (si se truncó) se expande completamente

(Opcional) Los títulos pueden contener enlaces / toda la imagen es un enlace

Por favor, vea una explicación gráfica:

Esto es algo similar a cómohttp://www.flickr.com/explore y muchos otros sitios lo hacen.

Esto es lo que tengo hasta ahora (no demasiado, en realidad, ya que muestra el título en el medio vertical, no en la parte inferior):

.image-block {
    display: inline-block;
    margin: 0 0 0 0;
}

.container { /* testing only */
    width: 1555px;
    overflow: scroll;
}



.hover-me {
   position: relative;

}

.hover-me img{
    width:100%;
    height:auto;
    display: block;
}

.hover-me:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: rgba(128,128,128,.5);
    transition: all .5s ease;
    opacity: 0;
}

.hover-me .caption {
    display: block;
    height: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -10px;
    text-align: center;
    transition: all .5s ease;
    opacity: 0;
    z-index: 2;
    color: #fff;
}

.hover-me:hover:after , .hover-me:hover .caption {
    opacity: 1;
}

<div class="container">
    <span  class="image-block hover-me ng-scope" style="padding-right: 5px; padding-bottom: 5px; height: 257px; width: 269px;">
            <img class="hovertext" width="269" height="257" src="http://i.imgur.com/zOEilgll.jpg">
           <span class="caption">This is a longish text of what looks like a camel; really quote a long long long long long long long long long long long long text</span>
    </span><span  class="image-block hover-me ng-scope" style="padding-right: 5px; padding-bottom: 5px; height: 257px; width: 385px;">
            <img class="hovertext" width="385" height="257" src="http://i.imgur.com/jj1dY0sl.jpg">
           <span class="caption">Well this is quite a pretty picture too</span>
    </span><span  class="image-block hover-me ng-scope" style="padding-right: 10px; padding-bottom: 5px; height: 257px; width: 396px;">
            <img class="hovertext" width="396" height="257" src="http://i.imgur.com/yVlWIc0l.jpg">
           <span class="caption">Omg what is this a black and white picture</span>
    </span><span  class="image-block hover-me ng-scope" style="padding-right: 0px; padding-bottom: 5px; height: 257px; width: 456px;">
            <img class="hovertext" width="456" height="257" src="http://i.imgur.com/roRmFJWl.jpg">
           <span class="caption">This is just an ordinary truck, I think... maybe; but the discription is really quite long</span>
    </span><span  class="image-block hover-me ng-scope" style="padding-right: 5px; padding-bottom: 5px; height: 289px; width: 433px;">
            <img class="hovertext" width="433" height="289" src="http://i.imgur.com/yo2WhKFl.jpg">
           <span class="caption">A great quote frm a great explorer</span>
    </span>
    <span>More images follow...</span>
</div>