Pie de texto en nuestras imagenes

Hoy he visto en CiudadBlogger.com una entrada muy interesante donde nos explica como podemos poner un texto en los pies de nuestras fotos e incluso cambiar el fondo de las mismas.

Blogger nos da la opción de añadir ese pie de foto cuando lo damos a editar la imagen, en la parte de leyenda.
Con este codigo sera a;adir a nuestra imagen un texto en la parte de arriba y un fondo semitransparente.
 

Para ello nos tenemos que ir a  Plantilla | Edición de HTML y antes de ]]></b:skin> agrega estos estilos:

.caption {
    padding: 0;
    width: 100%;
    position: relative;
    }
    .caption img {
    width: 100%;
    height: auto;
    display: block;
    padding: 0;
    border: 0;
    }
    .caption::before {
    content: attr(title);
    position: absolute;
    background: #EAF200; /* Color de fondo */
    background: rgba(234, 242, 0, 0.6); /* Color de fondo en RGBA */
    color: #000; /* Color del texto */
    font-size: 14px; /* Tamaño del texto */
    padding: 5px;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    z-index: 1;
    }

  
Ahora cada vez que quieras ponerle un pie de foto a tus imágenes usa este código:

<div style="width:400px; padding:10px; margin:0 auto;"><div class='caption' title='Agrega aquí el pie de foto'><img src='URL de la imagen'/></div></div>

Ahí verás dónde se añade la descripción de la foto, así como la URL de la imagen.
El tamaño de la imagen se cambia modificando lo que está en negrita.

La imagen estará centrada por defecto, pero si quisieras alinear la imagen a la izquierda para que quede rodeada de texto entonces usa este código:

   <div style="width:400px; padding:10px; clear: left; float: left;"><div class='caption' title='Agrega aquí el pie de foto'><img src='URL de la imagen'/></div></div>

Lo mismo podemos hacer si queremos alinear la imagen a la derecha, solo cambiando esto parte por right

     clear: right; float: right;

Y si quisiéramos que el pie de foto aparezca sólo cuando se pase el cursor por encima de la imagen

Pondremos este otro codigo

    .caption {
    padding: 0;
    width: 100%;
    position: relative;
    }
    .caption img {
    width: 100%;
    height: auto;
    display: block;
    padding: 0;
    border: 0;
    }
    .caption::before {
    content: attr(title);
    position: absolute;
    background: #EAF200;
    background: rgba(234, 242, 0, 0.6);
    color: #000;
    font-size: 14px;
    padding: 5px;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    opacity:0;
    filter:alpha(opacity=00);
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    transition: all 0.4s linear;
    }
    .caption:hover:before {
    opacity:1;
    filter:alpha(opacity=100);
    }