JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://nexts.github.com/jq.entry/js/jq.entry.min.js"></script>
<div class="container" id="container">
    
    <div class="item">
        <div class="hover-wrap">
            <div class="hover-content">
                <span class="table">
                    <span class="table-cell">
                        Custom hover effect
                    </span>
                </span>
            </div>
        </div>
        
        <div class="item-content">
            <img src="http://nexts.github.com/jq.entry/img/1.jpg" alt="image-sample" />
        </div>
    </div>
        
    <div class="item">
        <div class="hover-wrap">
            <div class="hover-content">
                <span class="table">
                    <span class="table-cell">
                        Custom hover effect
                    </span>
                </span>
            </div>
        </div>
        
        <div class="item-content">
            <img src="http://nexts.github.com/jq.entry/img/2.gif" alt="image-sample"/>
        </div>
    </div>
            
    <div class="item">
        <div class="hover-wrap">
            <div class="hover-content">
                <span class="table">
                    <span class="table-cell">
                        Custom hover effect
                    </span>
                </span>
            </div>
        </div>
        
        <div class="item-content">
            <img src="http://nexts.github.com/jq.entry/img/3.jpg" alt="image-sample" />
        </div>
    </div>	
                
     <div class="item">
        <div class="hover-wrap">
            <div class="hover-content">
                <span class="table">
                    <span class="table-cell">
                        Custom hover effect
                    </span>
                </span>
            </div>
        </div>
        
        <div class="item-content">
            <img src="http://nexts.github.com/jq.entry/img/1.jpg"...

CSS

.item{
    float: left;
    position: relative;
    background: gray;
    margin: 0 10px 10px 0;
    text-align: center;
    overflow: hidden;
}

.item .hover-wrap{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(221, 238, 246, .9);
    border: 10px solid rgba(255, 255, 255, .9);
}

.item .hover-wrap .hover-content{
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
}

.item .hover-wrap .hover-content .table{
    display: table;
    width: 100%;
    height: 100%;
}

.item .hover-wrap .hover-content .table-cell{
    display: table-cell;
    vertical-align: middle;
    font-family: Verdana;
    font-size: 12px;
}

.item img{
    width: 130px;
    height: 130px;
    vertical-align: top;
}

JavaScript

$('#container > div.item').hover(function(event){
    // mouseenter
    var $item = $(this),
        direction = $item.entry({e:event});
    
    // fix jquery slide issue when moving cursor too fast
    if($item.hasClass('opened')) $item.find('.hover-wrap').stop(true,true).show();
    
    $.when($item.find('.hover-wrap').stop(true, true).show("slide", { direction: direction}, 255, 'easeOutQuad')).done(function(){
        $item.addClass('opened');
    });
    
    // fix javascript missing events when moving cursor too fast.
    // hover may stay active if javascript miss mousemove event, simply hide them
    var inverted_direction = $item.entry({e:event, invert: true});
    $item.siblings('.opened').removeClass('opened')
        .find('.hover-wrap').hide("slide", { direction: direction}, 255, 'easeOutQuad');
    
}, function(event){
    // mouseleave
    var $item = $(this),
        direction = $item.entry({e:event});
    $.when($item.find('.hover-wrap').stop(true, true).hide("slide", { direction: direction}, 255, 'easeOutQuad')).done(function(){
        $item.removeClass('opened');
    });
    
});