JSFiddle - React, Tailwind, and code Playground

HTML

<div class="home_post_box" style="border: 1px solid #000;">

        <div class="home_post_text">
            <a href="#"><h3>Title</h3></a>

            <a href="#"><p class="home_post_text_back">check it out</p></a>
        </div>

</div>

CSS

.home_post_text {
background-color: #36393D;
width: 385px;
height: 70px;
padding:0;
position:absolute;
bottom:0;
left: 0;
color: #fff;
z-index: 10;
text-decoration: none;
    
//visibility: hidden;
top: 200px;
}

.home_post_box { width: 385px; height: 385px; float: left; margin-right: 40px; margin-bottom: 40px; position: relative; }

JavaScript

$("#MouseHover").hover(function () {
        $(this).css("home_post_box", "blue");
    }, function () {
        $(this).css("home_post_text", "white");
    });