JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="services-wrapper">
  <a href="#!">
    <div class="col-md-6 relative nopadding">
      <div id="overlay-office" class="group-overlay"></div>
      <div id="test-office" class="test-service">
        <div id="logo-test-office" class="group-logo" style="color: rgb(255, 255, 255); top: 0px;"></div>
        <p class="txt-sml text-white">The widest choice of office supplies
          <br>and equipment.</p>
      </div>
    </div>
  </a>
  <a href="#!">
    <div class="col-md-6 relative nopadding">
      <div id="overlay-facilities" class="group-overlay"></div>
      <div id="test-facilities" class="test-service">
        <div id="logo-test-facilities" class="group-logo" style="color: rgb(255, 255, 255); top: 0px;"></div>
        <p class="txt-sml text-grey">Hygiene, cleaning, catering
          <br>and workplace supplies.</p>
      </div>
    </div>
  </a>
  <div class="clearfix"></div>
</div>

CSS

.test-service {
		width: 370px;
		height: 270px;
		display: block;
		box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
		@include transition(all 0.2s ease-out);
     background: #555555;
	}

	.test-service:hover{box-shadow: 0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15);}



	#logo-test-office {
		background: url(../img/logo-irongate-office.png);
		background-repeat: no-repeat;
    	background-position-y: 28px;
		@include image-2x("../img/retina/logo-irongate-officex2.png", 186px, 29px);
		width: 186px;
		height: 57px;
		margin: auto;
		display: block;
	}

	#logo-test-facilities {
		width: 220px;
		height: 57px;
		margin: auto;
		display: block;
	}

	.test-service .txt-sml {
		@include font-size(18);
		@include line-height(24);
	    margin: 10px 0;
	    font-family: 'Museo 100', sans-serif;
	    font-weight: 100;
	    position: relative;
	    z-index: 10;
	    pointer-events: none;
	}
	#test-office .txt-sml, #test-facilities .txt-sml  {color: $white;}

#overlay-office {background: #0072ce;}
	#overlay-facilities {background: #c63663;}

	.group-overlay {
	    width: 370px;
	    height: 270px;
	    position: absolute;		
	    top: 15px;
	    opacity: 0;
	    @include transition(all 0.3s ease-out);	
	    z-index: 1;	
	}
	.group-overlay:hover{opacity:0.9;}

	.group-logo{position:relative; z-index: 10; pointer-events: none;}
  
.text-grey {
  color: #000000;
}

.text-white {
  color: #FFFFFF;
}

JavaScript

jQuery(document).ready(function($) {
  jQuery('.group-overlay').on('mouseenter mouseleave', function(e) {
    var precolor;
    if (e.type === "mouseenter") {
      var precolor = jQuery(this).next('.test-service').find('.txt-sml').css("color");
      jQuery(this).next('.test-service').find('.txt-sml, .group-logo').animate({
        color: "#FFFFFF",
        top: "+=40",
      }, 300, function() {
        // Animation complete.
      });
    } else if (e.type === "mouseleave") {
      jQuery(this).next('.test-service').find('.txt-sml, .group-logo').animate({
        color: "'" + precolor + "'",
        top: "-=40",
      }, 300, function() {
        // Animation complete.
      });
    }
  });
});