Para este tipo de cuestiones viene muy bien echar mano de firebug o similares.
Así podrá ver qué propiedades/valores tienen declarado los distintos elementos.
Así, en el ejemplo de su consulta vemos que el texto está en:
Código CSS:
Ver original.media .title {
background: url("/f/i/bg.destacados.png") repeat scroll 0 0 transparent;
bottom: 0;
left: 0;
padding: 10px;
position: absolute;
width: 290px;
z-index: 3;
y la imagen (dentro de un enlace) aparece después de ese texto en el html.
Rollo explicativo (puede saltárselo si sólo buscaba el código):
En el modelo de cajas que rige el comportamientos de los elementos de un documento web, todos y cada uno de dichos elementos ocupan un lugar "físico" y se aplica la máxima, como en el mundo real, de que dos elementos no pueden ocupar la misma posición al mismo tiempo.
Por lo tanto, para alterar dicho comportamiento, hay que actuar o declarar explícitamente en la propiedad "position"un valor tal que lo permita.
Position en w3c (traducción al castellano del sidar.org) Una buena explicación, obra de Mikmoro