Display div on hover

[pzin]

Usa highlight cuando publiques código.

Y cuando publiques código deja claro cómo es ese código, porque esto:

Código HTML:

<div class="imagen">
<div class="contenido">
 

Yo no entiendo bien si es:

Código HTML:

<div class="imagen"></div>
<div class="contenido"></div>
 

O bien:

Código HTML:

<div class="imagen">
  <div class="contenido"></div>
</div>
 

Una detalle bastante importante.

Respecto a la duda, es el comportamiento habitual de una posición relativa, ya que sólo mueve el contenido relativamente a su posición dentro del flujo del HTML sin que esta se pierda y por lo tanto siga ahí.

Si el texto (la clase .contenido) está dentro de la imagen (.imagen), cosa que no quedó clara por aquello de no publicar las etiquetas de cierre correspondientes, entonces lo ideal sería aplicar una posición relativa al contenedor y una absoluta al texto:

Código CSS:

div.imagen {
  position: relative;
}
 
div.contenido {
  position: absolute;
}
 

Y ya ajustas con top, right, bottom y left donde quieres que aparezca en relación a la imagen.