JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <article class="hubbub">
        //article content
         <h2 class="subtitled">
        //h2 content
    </h2>

    </article>
</div>

CSS

article.hubbub {
    position: relative;
    border:1px solid black;
}
article.hubbub:hover {
    border:1px solid red;
}
h2.subtitled {
    display: none;
    position: fixed;
    height:100px;
    z-index: 999999999;
    bottom: 20px;
    left: 0;
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 42px;
    text-align: center;
    color: yellow;
}
.hubbub:hover  h2 {
    display:block;
}