Без css анимации.
HTML верстка:
<div class="cont">
<div class="overlay">
<h1>Заголовок</h1>
<p>Текст</p>
</div>
<img src="img1.jpg">
</div>
CSS стили:
.cont {
width: 500px;
height: 500px;
position: relative;
}
.overlay {
position: absolute;
text-align: center;
width: 100%;
height: 100%;
background: rbga(0, 0, 0, 0.3);
display: none;
}
JavaScript(jQuery):
jQuery(document).on("hover", ".cont", function() {
jQuery(this).children(".overlay").fadeIn("fast");
}, function() {
jQuery(this).children(".overlay").fadeOut("fast");
});
Принцип простой, есть контейнер с фоновой заливкой цвета, в нем картинка, над картинкой абсолютно расположен блок с текстом, который скрыт (display: none).
При наведении мышкой на контейнер, показываем скрытый блок с текстом, и делаем прозрачность у картинки. На идеальное решение не претендует, но должно работать.