JSFiddle - React, Tailwind, and code Playground

HTML

<div class="boxgrid">
<div class="boxcaption"></div>
</div>

CSS

div{float:left;padding:40px;background:red;}

div div{float:left;padding:40px;background:blue;}

JavaScript

$(document).ready(function(){
    if(!($.browser.safari || $.browser.chrome)){
        
        $('.boxgrid').find('.boxcaption').css({'opacity':0});
        
        $('.boxgrid').hover(function(){
            $(".boxcaption", this).animate({opacity:'1'},{duration:200});
        }, function() {
            $(".boxcaption", this).animate({opacity:'0'},{duration:350});
        });
    }
});