¿Cómo poner texto sobre una imagen en HTML?

Question

He visto que algunas páginas contienen imágenes con un texto sobre puesto, pero la etiqueta img no puede contener otras etiquetas ya que sólo es así:

<img src="algo.com/una_imagen"> 

Intenté lo siguiente:

<div>
<img src="algo.com/una_imagen">
<p>Texto</p>
</div>

Pero el texto sólo aparece debajo de la imagen.

Answer 1

Importante poner tu imagen en posición relative y tu caja de texto en absolute como ya te han mencionado.

Un ejemplo simple.

div, img {
  display: block;
  position: relative;  
  width: 300px;
}

div p {
  background-color: rgba(255,255,255,.8);
  display: block;
  position: absolute;
  bottom: -16px;
  left: 0;
  padding: 5px;
  width: 100%;
}

<div>
  <img src="http://oi67.tinypic.com/28a11js.jpg">
  <p>Texto</p>
</div>

Si buscas un efecto hover, te dejare una alternativa.

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}

.container:hover .overlay {
  bottom: 0;
  height: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

<div class="container">
  <img src="http://oi67.tinypic.com/28a11js.jpg" alt="" class="image">
  <div class="overlay">
    <div class="text">Mi texto</div>
  </div>
</div>

Fuente: Image Hover Overlay