JSFiddle - React, Tailwind, and code Playground
HTML
<div class="grid-block identity" style="background-color:#FF0000);">
<div class="grid-block-text-hover-wrap">
<div class="grid-block-text-wrap">
<div class="grid-block-text-title">TITLE</div>
<div class="grid-block-text-subtitle">dkjfhdkjfhdjkfhj
dfjkdjfkdjfkj
fdfdfdf</div>
</div>
</div>
</div>
CSS
.grid-block {
position: absolute;
width: 380px; height: 250px;
margin-left: 25px; margin-right: 25px;
margin-bottom: 50px;
font-family: 'times';
text-align: center;
background: no-repeat 50% 50%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
cursor: pointer;
display: table; vertical-align: middle;
}
.grid-block-text-hover-wrap {
position: absolute;
width: 100%; height: 100%;
background: rgba(0,0,0,0.75);
display: table;
vertical-align: middle;
}
.grid-block-text-hover-wrap .grid-block-text-wrap {
color: red;
}
.grid-block .grid-block-text-wrap {
display: table-cell; vertical-align: middle;
width: 100%; height: 100%;
}
.grid-block-text-wrap {
margin-left: 50px; margin-right: 50px;
}
.grid-block-text-title {
position: relative;
margin-top: 7px;
margin-bottom: 20px;
text-transform: uppercase;
}
.grid-block-text-hover-wrap .grid-block-text-title {
font-size: 16px;
line-height: 25px;
letter-spacing: 2px !important;
}
.grid-block-text-subtitle {
position: relative;
font-size: 12px;
letter-spacing: 2px !important;
text-transform: uppercase;
}
JavaScript
$(document).ready(function(){
$('.grid-block-text-hover-wrap').hide();
$('.grid-block').mouseenter(function() {
$(this).children('.grid-block-text-hover-wrap, .grid-block-image-hover-wrap').stop(true, true).fadeIn('slow');
});
$('.grid-block').mouseleave(function() {
$(this).children('.grid-block-text-hover-wrap, .grid-block-image-hover-wrap').stop(true, true).fadeOut('fast');
});
});