#15 - Como poner un texto con fondo de color sobre una imagen

1. Vamos a Diseño > Edición HTML
2. Pulsamos F3 y escribimos: ]]>
3. Justo antes añadimos este código:

/* Sin color */<br /> ul { overflow: hidden; padding: 5px; }<br /> ul > li {<br /> position: relative;<br /> float: left;<br /> list-style: none;<br /> margin: 0 20px 20px 0;<br /> font-size: 10px;<br /> }<br /> ul a { text-decoration: none; display: block; }<br /> ul li img { display: block; position: relative; z-index: -1; } /* IE8 fix, background colour appears behind img for uknown reason set negative z-index */<br /> ul li:not([class=na]) img { position: static; } /* Reset relative position, as this plays havoc with good browsers */<br /> 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; }<br /> ul a:hover img, ul a:focus img { outline: 3px solid #ccc; }<br /> <br /> ul a:hover:after,<br /> ul a:focus:after<br /> {<br /> content: attr(title);<br /> color: #000;<br /> position: absolute;<br /> bottom: 0;<br /> height: 30px;<br /> line-height: 30px;<br /> text-align: center;<br /> font-weight: bold;<br /> width: 100%;<br /> background: rgb(255,255,255);<br /> background: rgba(255,255,255,0.7);<br /> background: -moz-linear-gradient(top, rgba(255,255,255,0.7), rgba(204,204,204,0.7)); /* Firefox 3.6+ */<br /> background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.7)), to(rgba(204,204,204,0.7))); /* Safari */<br /> display: block;<br /> text-shadow: 1px 1px 1px #fff;<br /> }<br /> ul a.reverse:hover:after,<br /> ul a.reverse:focus:after { top: 0; right: 0; }<br /> <br /> ul a.offset:hover:after,<br /> ul a.offset:focus:after { top: 50%; margin-top: -15px; }<br /> <br /> ul a.alternate01:hover:after,<br /> ul a.alternate01:focus:after<br /> {<br /> top: 0;<br /> width: 50%;<br /> height: 100%;<br /> line-height: normal;<br /> text-align: left;<br /> padding: 4px;<br /> font-size: 12px;<br /> -moz-box-sizing: border-box;<br /> -webkit-box-sizing: border-box;<br /> box-sizing: border-box;<br /> }<br /> /* Con color */<br /> ul.color a:hover img, ul.color a:focus img { outline-color: #1E528C; }<br /> <br /> ul.color a:hover:after,<br /> ul.color a:focus:after<br /> {<br /> background: rgb(30,82,140);<br /> background: rgba(30, 82, 140, 0.7);<br /> background: -moz-linear-gradient(top, rgba(30, 82, 140, 0.7), rgba(43, 117, 200, 0.7)); /* Firefox 3.6+ */<br /> background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30, 82, 140, 0.7)), to(rgba(43, 117, 200, 0.7))); /* Safari */<br /> color: #fff;<br /> text-shadow: 1px 1px 1px #000;<br /> }

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

<ul><br /> <li><a href="url-enlace" class="offset" title="Título"><img src="url-imagen" width="559" height="283" alt="Título" /></a></li><br /> </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; }

5. Le damos a Guardar y listo.


Pedido de: Yoaa


PD. Sé lo que quieres decir, pero eso no sé hacerlo, lo que sí sé es una cosa muy parecida. 
PD2. Si no has entendido lo que he explicado, también está aquí resumido. Y aquí puedes ver como queda.