JSFiddle - React, Tailwind, and code Playground

HTML

<div id='msgBox'>
   <div id='blueBox'>
      
   </div>
   <div id='msgContent'>
       ... all the message contents, buttons, etc.
   </div>
</div>

CSS

#blueBox {
background-color: #FFD090;
opacity: 0.0;
position: absolute;
  top: 0;
  left: 0;
}

JavaScript

$("#msgBox").hover(function(){
    $("#blueBox").css({top:$(this).css("top")}).height($(this).outerHeight()).width($(this).outerWidth()).animate({opacity:0.6});
},function(){
    $("#blueBox").animate({opacity:0.0}).height(0).width(0);
});