Появляющийся блок при наведение мыши

структура html

<div class="block-wrap">
			<div class="block-img"></div>
			<div class="block-text">
				<h2>Заголовок</h2>
				<p>Текст</p>
			</div>
		</div>

структура css

.block-wrap{
    position: relative;
    overflow: hidden;
}
    .block-img{
        position: relative;
        width: 100%;
        height: auto;
    }
    .block-text{
        position: absolute;
        top: 0;
        left: 0;
        background: rbga(0,0,0,.3);
        color: #fff;
        opacity: 0;
        visibility: hidden;
width: 100%;
height: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
padding: 5%;
                -webkit-transition: all 0.2s ease;
                -moz-transition: all 0.2s ease;
                -o-transition: all 0.2s ease;
                -ms-transition: all 0.2s ease;
                transition: all 0.2s ease;
    }
    .block-wrap:hover .block-text{
        opacity: 0;
        visibility: visible;
    }

Без 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).
При наведении мышкой на контейнер, показываем скрытый блок с текстом, и делаем прозрачность у картинки. На идеальное решение не претендует, но должно работать.