Edit in JSFiddle

$(function () {
    $('figure figcaption').hover(
      function () {
        $(this).animate({opacity:1},"fast");
      },
      function () {
        $(this).animate({opacity:0},"fast");
      }
    );
});

<figure>
    <img src="image.jpg" width="100" height="100" />
    <figcaption>
        	<h3>Title</h3>

        <p>text</p>
    </figcaption>
</figure>

figure {
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px;
}
figcaption {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background: rgba(0, 0, 0, .6);
    opacity: 1;
    width: 100%;
    height: 100%;
}