JSFiddle - React, Tailwind, and code Playground

HTML

<div class="view view-first">
     <img src="http://ruseller.com/lessons/les1322/demo/images/1.jpg" />

     	<h2>Заголовок</h2>

</div>

CSS

.view {
    width: 300px;
    height: 200px;
    margin: 10px;
    position: relative;
    text-align: center;
    cursor: default;
}

.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0;
    pointer-events:none;
}


h2 {
    transform: translateY(-20px);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

.view-first:hover h2 {
    opacity: 1;
    transform: translateY(0px);
}