Como colocar texto encima de una imagen guía completa

En esta ocasión vamos a hacer una guía completa de como colocar texto encima de una imagen de una manera sencilla utilizando un poco de css y unos cuantos conceptos de maquetación.

Este tipo de practica es ideal para agregar leyendas a las imágenes o simplemente para agregar uno o mas valores de un producto por ejemplo el precio, la categoría etc aunque lo mas usado son las descripciones de la imagen o del articulo donde se encuentra dicha imagen.

Te voy a dejar dos ejemplos css uno para utilizar un solo texto encima de la imagen que puedes usar de leyenda etc y otro para que puedas agregar dos o mas textos.

Vamos con el ejemplo 1 para meter un solo texto:

<style>
   .img-texto {
   	position: relative;
   	float: left;
   }
   .img-texto span {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: #136e73;
    padding: 10px;
    color: #fff;
    font-family: sans-serif;
   }
</style>

<div class="img-texto">
<img src="http://i.imgur.com/9nY6MsA.jpg">
<span>Lorem ipsum dolor sit amet, consectetur.</span>
</div>

y ahora vamos con el ejemplo de varios textos:

<style>
   .img-texto {
   	position: relative;
   	float: left;
   }
   .img-texto span {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: #136e73;
    padding: 10px;
    color: #fff;
    font-family: sans-serif;
   }
   .texto-i {
   	right: inherit !important;
    left: 0;
   }
   .texto-d {
   	right: 0;
    left: inherit !important;
   }
</style>

<div class="img-texto">
<img src="http://i.imgur.com/9nY6MsA.jpg">
<span class="texto-i">Consola</span>
<span class="texto-d">499€</span>
</div>

si necesitas alguna modificación deja un comentario ;)

saludoss

¿Como pongo un solo texto encima de la imagen, pero en el centro e invisible con una url?
Es muy complicado lo que quiero, discúlpame.

Si creas un nuevo tema con tu pregunta te lo explico, salu2!

@Techno Fox yo solo usa esto:

<a href="#">
<img src="#">
</a>

Hola buen día.. no estoy haciendo una página web pero debo crear un mailling que debe contener una imagen a la que le ponga en todo el centro un texto.. y la verdad no tengo idea de como hacerlo.
espero me puedan ayudar