El problema es el maquetado que le haces.
Prueba cambiando esto:
Por esto:
Código HTML:
Ver original<li><div class="ContImgClase"><img src="images/Noticias/noticia2.jpg"><p class="TxtImgClase">aerobox
</p></div></li>
Luego:
Código CSS:
Ver original.ContImgClase{
position:relative
width: 304px;
height: 196px;
}
.TxtImgClase{
background: rgba(43, 40, 40, 0.29);
position: absolute;
width: 304px;
height: 88px;
top: 720px; /*aquí cambias el valor o mejor cambias a Bottom: 10px, para posicionarlo respecto a la base de la caja que contiene la imagen */
}
Puede que exista algún error, ya que no he probado el código, pero esa es la idea.
La teoría dice que para posicionar un elemento en forma absoluta con respecto a su contenedor (y no a la pantalla), es necesario declarar al elemento padre la position: relative, o absolute o fixed. Si el padre o contenedor no lo tiene definido, busca al ancestro, es decir al contenedor del contenedor y así sucesivamente hasta llegar al body.
http://www.librosweb.es/css/capitulo..._absoluto.html
Saludos