Agregar un pie a las fotos de una página

Para que una foto tenga un texto debajo, como en el ejemplo de la derecha, podemos utilizar un DIV dentro de otro:

<div style=”width: 50%; border: 1px solid; background-color: #eee; padding: 0.5em; float: right; margin-left: 0.5em;”>

<a href=”fotogrande.png”>

<img src=”fotochica.png” alt=”Un café con leche realizado con arte” width=”100%” />

</a>

<div style=”width: 90%; padding: 0.5em; font-size: 0.8em; margin: auto;”>Esta imagen muestra un rico café con leche decorado, y su correspondiente vasito de jugo de naranja. </div>

</div>

De esa manera tendremos un DIV dentro de otro. El DIV más grande tiene un color de fondo gris muy clarito y el de adentro contiene la imagen.

Separando diseño de contenido

En los casos en que tenemos la posibilidad de acceder a la hoja de estilo de la página, será mucho mejor separar el diseño (que va en la hoja de estilo, CSS) del contenido (que va en el archivo HTML). Tomé la base de este blog (CiudadBlogger)

Este es el código para la hoja de estilo:

.piedefoto { padding: 0; width: 40%; position: relative; }

.piedefoto img { width: 40%; display: block; padding: 0; border: 0; }

.piedefoto::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; }

Y este, el código para insertar en el documento HTML:

<div style=”width:40%; padding:1em; margin:0 auto; float:right;”><div class=’piedefoto’ title=’Escribí acá el pie de foto’><img src=’Dirección de la imagen’/></div></div>

En el post original explican por qué el color de fondo está dos veces:

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.

Si jugamos un poco con colores y niveles de transparencia podemos lograr muchas variantes:

 

Estos son los estilos de esos tres ejemplos:

.prueba::before { content: attr(title); position: absolute; background: #00ff00; background: rgba(234, 234, 234, 0.7); color: #000; width:100%;padding: 5px; right: 0; bottom: 0; left: 0; text-align: center; z-index: 1; }
.prueba { padding: 0; position: relative; }
.prueba img { display: block; padding: 0; border: 0; }

.prueba2::before { content: attr(title); position: absolute; background: #0000FF; background: rgba(0, 0, 255, 0.6); color: #fff; width:50%;padding: 5px; right: 0; bottom: 50%; left: 0; text-align: center; z-index: 1; }
.prueba2 { padding: 0; position: relative; }
.prueba2 img { display: block; padding: 0; border: 0; }

.prueba3::before { content: attr(title); position: absolute; background: #FF9A00; background: rgba(255, 154, 0, 0.8); color: #000; width:90%;padding: 5px; bottom: 90%; left: 60px; text-align: left; z-index: 1; }
.prueba3 { padding: 0; position: relative; }
.prueba3 img { display: block; padding: 0; border: 0; }