Legenda em imagem

[fjunior2586]

Queria colocar um texto quando abrisse essa imagem, como uma especie de legenda.

 

 

<div id="fh5co-products" data-section="products">

                    <div class="container">
                        <div class="row">
                            <div class="col-md-8 col-md-offset-2 fh5co-section-heading text-center">
                                <h2 class="fh5co-lead animate-single product-animate-1">Nossas fotos fofinhas</h2>
                                <p class="fh5co-sub animate-single product-animate-2">Amor, aqui estão algumas fotinhas que eu achei fofas e que tem alguma coisa que eu queira falar. Desculpa não ter colocado a legenda na própria foto.</p>
                            </div>
                        

                            <div class="col-md-3 col-sm-6 col-xs-6 col-xxs-12">
                                <a href="images/tile1.jpg" class="fh5co-figure to-animate image-popup"  >
                                    <figure>
                                        <img src="images/pequenas/tile1.jpg" alt="Free HTML5 Responsive Template" class="img-responsive">
                                    </figure>
                                    <h4 class="fh5co-figure-lead">Descrição da img pequena</h4>
                                    <p class="fh5co-figure-text">Descrição da img pequena</p>
                                </a>
                            </div>

 

A linha azul é como a imagem em miniatura ( pré visualização ) e a vermelha é a imagem expandida.

[wash]

Use a tag figcaption: http://www.w3schools.com/tags/tag_figcaption.asp