JSFiddle - React, Tailwind, and code Playground

HTML

<a href="" class="cell cell-01" title="ONE"></a>
<a href="" class="cell cell-02" title="TWO"></a>

CSS

.cell {width: 200px; height: 200px; background: #f00; float: left; display: block; overflow: hidden;}

.hover {width: 200px; height: 200px; background: #000; text-align: center;}

.hover span {display: inline-block; padding: 10px 20px; font: bold 12px arial; font-style: italic; text-transform: uppercase; background: #222; border: 2px solid #fff; color: #fff;}

JavaScript

(function ($) {
	$('.cell').on('mouseenter', function (){
		var $this = $(this);

        $(this).html('<div class="hover"><span>' + $(this).attr('title') + '</span></div>');
		$(this).find('span').stop(true, false).animate({ "marginTop" : ($(this).innerHeight() / 2 - 19) + "px" });
		$(this).find('.hover').stop(true, false).fadeIn(250);
	}).on('mouseleave', function (){
		var $this = $(this);
		
		$(this).find('.hover').stop(true, false).stop(true, false).fadeOut(250);
		$(this).find('span').animate({ "marginTop" : "500px" });
	});
}(jQuery));