JSFiddle - React, Tailwind, and code Playground

HTML

<div id='frame'></div>

CSS

#frame {
    background-color:blue;
    width:150px;
    height:100px;
    position:relative;
}
#frame:hover {
    background-color:red;
}
#overlay {
    background-color:black;
    color:white;
    height:25px;
    width:100%;
    position:absolute;
    bottom:0;
    left:0;
}

JavaScript

$(document).ready(function() {
    $('#frame').hover(
        function() {
            $('#frame').append('<div id="overlay">blah blah</div>');
        },
        function() {
            $('#overlay').remove();
        }
    );
});