Pie de foto: con fondo y sobre la imagen

El pie de foto es una pequeña y breve descripción que podemos añadir a las imágenes que tengamos en el blog. Esta descripción da información precisa sobre la foto y nos ayuda a comprender dicha imagen.
Por ejemplo, al añadir la foto de una persona podemos insertar un pie de foto que dé el nombre de la persona, su cargo, un mérito, o un hecho con el que se le relacione, de esta forma quien mire la foto sabrá quién es, o qué hizo esa persona.
Por el lado de SEO estas descripciones también nos ayudar a posicionar las imágenes en los buscadores ya que esta información también sirve para los robots.

Blogger nos da la opción de añadir ese pie de foto (leyenda) cuando subimos la imagen, el problema es que el resultado es muy simple y poco llamativo, tanto que pasa casi desapercibido.

Cachorros en el jardín

Lo que haremos será añadir un pie de foto a las imágenes, pero a diferencia del pie de foto tradicional éste estará situado encima de la misma imagen y le agregaremos un fondo semitransparente, de modo que el resultado sea como este:

Si quieres tener un pie de foto como estos sólo entra en 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.

En el primer código que añadimos están los estilos para el pie de foto. Verás que el color de fondo está dos veces, primero en código hexadecimal y luego en RGBA, esto es porque con RGBA podemos definir una transparencia, en este caso es de 0.6, pero en el caso de que el navegador (Internet Explorer como siempre) no soporte este estilo entonces tomará el primero, el hexadecimal, pero sin la transparencia. En la secciónColores puedes obtener el código tanto en hexadecimal como en RGB.

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>

En realidad es el mismo, sólo hemos añadido una flotación a la izquierda y quitamos el margen. El resultado es el siguiente.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquet leo et erat posuere, at aliquet lorem commodo. Maecenas a gravida ligula. Nunc sed malesuada leo, et lacinia diam. Nullam bibendum justo libero, a varius mi suscipit vel. Maecenas commodo venenatis ante, eget ultricies nulla faucibus quis. Duis volutpat vulputate tortor volutpat euismod. Nam sed sapien a odio porttitor tincidunt. Curabitur mollis enim lacus, euismod fringilla lorem fringilla accumsan. Integer a erat ornare, molestie lorem sed, volutpat arcu.

Lo mismo podemos hacer si queremos alinear la imagen a la derecha.

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

Y se verá así:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquet leo et erat posuere, at aliquet lorem commodo. Maecenas a gravida ligula. Nunc sed malesuada leo, et lacinia diam. Nullam bibendum justo libero, a varius mi suscipit vel. Maecenas commodo venenatis ante, eget ultricies nulla faucibus quis. Duis volutpat vulputate tortor volutpat euismod. Nam sed sapien a odio porttitor tincidunt. Curabitur mollis enim lacus, euismod fringilla lorem fringilla accumsan. Integer a erat ornare, molestie lorem sed, volutpat arcu.

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

En ese caso quitamos los estilos que hayamos puesto y en su lugar agregamos estos:

.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);
}

El resultado en cualquiera de los casos me parece que es mucho más atractivo que el nativo de Blogger (aunque en gustos se rompen géneros), además que podemos personalizarlo a nuestro gusto cambiando el color de fondo, tamaño, tipo del texto, y estilos extra que se le pueden agregar según la creatividad de cada quien.