JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ih">
    <img class="ih-image" src="http://designsnack.com/screenshots/image.php?width=330&amp;height=220&amp;cropratio=330:220&amp;image=/screenshots/8264948088.jpg"/>
    <div class="ih-info">
        Your overlay content
    </div>
</div>

CSS

.ih { position:relative; }
.ih, .ih-image, .ih-info { display:block;width:330px;height:220px; }
.ih-image, .ih-info { z-index:500;position:absolute;top:0;left:0;right:0;bottom:0; }
.ih-info { z-index:501;background:black;color:white;}

JavaScript

$(function(){
    $('.ih').hover(
        // Over
        function(){
            var $ih = $(this);
            $ih.find('.ih-info').stop(true,true).animate({opacity:0.8, width: "+=50%", height: "+=50%"}, 400);
            $ih.find('.ih-image').stop(true,true).animate({width: "+=50%", height: "+=50%"}, 400);
        },
        // Out
        function(){
            var $ih = $(this);
            $ih.find('.ih-info').stop(true,true).animate({opacity:0, width: "-=50%", height: "-=50%"}, 400);
            $ih.find('.ih-image').stop(true,true).animate({width: "-=50%", height: "-=50%"}, 400);
        }
    ).find('.ih-info').css('opacity',0);
});