Texto con fondo de color sobre imagen

Hace unos días veíamos una de tantas ideas para mostrar texto sobre imágenes. En Six Revisions nos proponen soluciones también creadas con CSS, de todas las que propone escogí la que muestra el texto centrado, con Explorer no se consigue resultado alguno pero es un efecto muy elegante y vale la pena probarlo.

La forma de conseguir ese efecto es muy sencilla y una vez añadidos los estilos sólo debemos añadir un pequeño código cada vez que deseamos mostrar una imagen.

Localizamos ]]></b:skin> y justo antes añadimos:

/* Sin color */
ul { overflow: hidden; padding: 5px; }
ul > li {
position: relative;
float: left;
list-style: none;
margin: 0 20px 20px 0;
font-size: 10px;
}
ul a { text-decoration: none; display: block; }
ul li img { display: block; position: relative; z-index: -1; } /* IE8 fix, background colour appears behind img for uknown reason set negative z-index */
ul li:not([class=na]) img { position: static; } /* Reset relative position, as this plays havoc with good browsers */
ul a:hover, ul a:focus { display: block; outline: none; -moz-box-shadow: 3px 3px 5px #000; -webkit-box-shadow: 3px 3px 5px #000; box-shadow: 3px 3px 5px #000; }
ul a:hover img, ul a:focus img { outline: 3px solid #ccc; }

ul a:hover:after,
ul a:focus:after
{
content: attr(title);
color: #000;
position: absolute;
bottom: 0;
height: 30px;
line-height: 30px;
text-align: center;
font-weight: bold;
width: 100%;
background: rgb(255,255,255);
background: rgba(255,255,255,0.7);
background: -moz-linear-gradient(top, rgba(255,255,255,0.7), rgba(204,204,204,0.7)); /* Firefox 3.6+ */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.7)), to(rgba(204,204,204,0.7))); /* Safari */
display: block;
text-shadow: 1px 1px 1px #fff;
}
ul a.reverse:hover:after,
ul a.reverse:focus:after { top: 0; right: 0; }

ul a.offset:hover:after,
ul a.offset:focus:after { top: 50%; margin-top: -15px; }

ul a.alternate01:hover:after,
ul a.alternate01:focus:after
{
top: 0;
width: 50%;
height: 100%;
line-height: normal;
text-align: left;
padding: 4px;
font-size: 12px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* Con color */
ul.color a:hover img, ul.color a:focus img { outline-color: #1E528C; }

ul.color a:hover:after,
ul.color a:focus:after
{
background: rgb(30,82,140);
background: rgba(30, 82, 140, 0.7);
background: -moz-linear-gradient(top, rgba(30, 82, 140, 0.7), rgba(43, 117, 200, 0.7)); /* Firefox 3.6+ */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30, 82, 140, 0.7)), to(rgba(43, 117, 200, 0.7))); /* Safari */
color: #fff;
text-shadow: 1px 1px 1px #000;
}

A continuación en un gadget de HTML añadimos:

<ul>
<li><a href="url-enlace" class="offset" title="Título"><img src="url-imagen" width="559" height="283" alt="Título" /></a></li>
</ul>

Si preferimos mostrar el fondo del texto y borde de color entonces debemos añadir la clase "color" para que adquiera los estilos establecidos.

<ul class="color">
<li><a href="url-enlace" class="offset" title="Título"><img src="url-imagen" width="559" height="283" alt="Título" /></a></li>
</ul>

❋En url-imagen añadimos la url de la imagen que vamos a mostrar.
❋Donde url-enlace es el lugar para añadir la url del sitio a enlazar.
❋Con width establecemos la anchura de la imagen y con heigh la altura.

Otros cambios que podemos hacer.

En los estilos que añadimos a la plantilla podemos cambiar los estilos de texto y color de fondo, buscaremos /* Con color */ y a partir de ahí modificamos:

❋Con text-shadow: 1px 1px 1px #000; modificamos la sombra del texto.
❋En color: #fff el color de texto.
❋Si añadimos a continuación font-size: 14px; aumentamos el tamaño de fuente.
❋Para el color de borde buscamos:
ul.color a:hover img, ul.color a:focus img { outline-color: #4682B4; }

❋A continuación el segundo background es el color de fondo:
ul.color a:hover:after,
ul.color a:focus:after
{
background: rgb(30,82,140);
background: rgba(30, 82, 140, 0.7);