JSFiddle - React, Tailwind, and code Playground

HTML

<div class="overlay">

<div class="text">
<p style="text-align: center; font-size: 18px;">
<span style="color: #ffffff; font-weight: 200;">Cloud-Based | Single Tenant | Mosaic will operationalize warehouse in weeks with no start up cost | Mosaic takes care of all hosting, licensing and maintenance | Mosaic manages day to day operations | Highly flexible scalable warehouse model accommodates long-term evolution of data portfolio and sales operations | Mosaic implements new data sets and new requirements on demand</span></p>

</div>

<div class="title">
<h1 style="font-size: 56px; text-align: center; position: relative; top: 50%; line-height: 65px;"><span style="color: #ffffff; font-weight: 600;">Data     Warehouse</span></h1>
</div>

</div>

CSS

.overlay {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  transition: .5s ease;
  background-color: #5e8cc9;
  z-index: 99;
}
.text {
  text-align: center;
  color: #ff0000;
  font-size: 60px;
  font-family: raleway;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  z-index: 100;
  display: none;
}

.title {
  z-index: 98;
}

JavaScript

$('.overlay').mouseenter(function(){
	$('.text').fadeIn();
  $('.title').fadeOut();
});
$('.overlay').mouseout(function(){
	$('.text').fadeOut();
  $('.title').fadeIn();
});