Appearing block on hover

Question

JavaScript

Hi friends.
In javascript, I'm a dunce, so I'll forgive the help, I need a script so that when you hover over the image with the mouse, it is superimposed on it:
background: rbga(0,0,0,.3);
And in the center of the block:

<p>Заголовок</p>
<p>Текст</p>

ps I will correct the color and text, if you wish, you can add some kind of animation.
As a result, we need such a result when hovering over the image -

Answer 1

html structure

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

css structure

.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;
    }

Answer 2

No css animation.
HTML layout:

<div class="cont">
  <div class="overlay">
    <h1>Заголовок</h1>
    <p>Текст</p>
  </div>
  <img src="img1.jpg">
</div>

CSS styles:

.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");
});

The principle is simple, there is a container with a background color fill, there is a picture in it, a block with text is absolutely located above the picture, which is hidden (display: none).
When you hover the mouse over the container, we show a hidden block with text, and make the image transparent. It does not pretend to be an ideal solution, but it should work.