Texto encima de cualquier imagen usando CSS ~ Tube trucos

Colocar texto encima de cualquier imagen nos permite incluir el título de la imagen, como tambien una simple descripcion , o decir su procedencia. Esto puede lograrse sólo usando CSS, sin necesidad de usar Javascript para que la página no este más lenta.

Para lograr esto lo primero que bamos a hacer es dirigirnos a:

Diseño >>> Edición de HTML >>> expandimos artilugios

Buscamos la etiqueta </head> y añade antes estas líneas de CSS:

<style type="text/css">#TTrucosIMG{float:left;position:relative;}#TTrucosIMG .TTrucosIMG1 {width:320px;position:absolute;top:14px;left:14px;}</style>

Guardamos la plantilla .

A continuación les muestro el código. Puedes utilizarlo tanto en una entrada como en un gadget o elemento de página html-javascript que encontrarás en la parte de Diseño.

<div id="TTrucosIMG">
<img src="http://dl.dropbox.com/u/25944020/images3.jpg" />
<div class="TTrucosIMG1" style="color: #000;font-size: 0.9em; font-weight: bold; text-shadow: 0px 1px 1px #fff;">
<p>Parrafo sobre esta imagen</p>
<p>Que detalle este y todo con css</p>
</div>
</div>

Lo que esta de color rojo es la url de la imagen la remplazan por otra en su lugar.
Lo que esta de color naranja es el color del texto.
Lo que esta de color amarillo es el tamaño del texto mas es mas grande 1.0 , 1.1 , 1.2 etc...
Lo que esta de color verde es el efecto de texto undido o relieve que use en el texto .
Lo que esta de color azul es el texto a poner .

Con la etiqueta <p> y su cierre </p> sólo conseguimos que se produzca un salto de línea, dejando un espacio en blanco entre el contenido.

Para mostrar un simple salto de línea bastará con eliminar dichas etiquetas y añadir al final de la línea en la que presentaremos el salto <br></br>.

También puedes deshacerte de todo esto y escribir seguido.