JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cp_post_container">
    <div class="cp_post_picture">
        
        <div class="cp_post_date">
            <div class="cp_post_date_inner">
                <h2>date goes here</h2>
            </div> <!-- cp_post_date_inner END -->
        </div> <!-- cp_post_date END -->
        
        <div class="cp_post_text_box">
            <div class="cp_post_text_box_inner">
                <div class="cp_post_title"><h2>when the cursor enters the cp_post_text_box the div scrolls up to reveal more of the text</h2>
                </div> <!-- cp_post_title END -->
            </div> <!-- cp_post_text_box_inner END -->
        </div> <!-- cp_post_text_box END -->
        
    </div> <!-- cp_post_picture END -->
</div> <!-- cp_post_container END -->


<div class="cp_post_container">
<div class="cp_post_picture">
<div class="cp_post_date">
<div class="cp_post_date_inner">
<h2>date goes here</h2>
</div> <!-- cp_post_date_inner END -->
</div> <!-- cp_post_date END -->
<div class="cp_post_text_box">
<div class="cp_post_text_box_inner">
<div class="cp_post_title"><h2>when the cursor enters the cp_post_text_box the div scrolls up to reveal more of the text</h2>
</div> <!-- cp_post_title END -->
</div> <!-- cp_post_text_box_inner END -->
</div> <!-- cp_post_text_box END -->
</div> <!-- cp_post_picture END -->
</div> <!-- cp_post_container END -->

CSS

.cp_post_container {
background-color: black;
clear: right;
float: left;
width:235px;
height:157px;
left:0px;
padding:0px;
margin: 5px;
z-index:1;
border: solid 2px black;

}

.cp_post_picture {
position:relative;
background-color:blue;
width:235px;
height:157px;
display: block;
left: 0px;
top: 0px;
overflow:hidden;
}

.cp_post_date {
    background-color: green;
    display: block;
    height: 20px;
    left: 0;
    margin: 0;
    opacity: 0.75;
    padding: 0;
    position: relative;
    top: 0px;
    width: 235px;
    z-index: 2;
}

.cp_post_date_inner {
display:block;
height:20px;
left:1px;
margin:0;
padding:0;
position:relative;
top:1px;
width:235px;
z-index:3;
}


.cp_post_date h2 {
color:black;
font-family: Tahoma,Geneva,Verdana,sans-serif,Arial;
font-size:14px;
font-weight:normal;
margin:0;
padding:0;
}

.cp_post_text_box {
background-color: white;
background-repeat:repeat;
display:block;
height:100px;
left:0;
margin:0;
padding:0;
position:relative;
top:115px;
width:235px;
z-index:2;
}

.cp_post_text_box_inner {
 display: block;
    height: 70px;
    left: 2px;
    margin: 0;
    padding: 0;
    position: relative;
    top: 2px;
    width: 231px;
    z-index: 3;
}

.cp_post_title {
display:block;
height:auto;
left:0px;
margin:0px;
padding:0px;
position:relative;
top:0px;
width:231px;
z-index:4;
}

.cp_post_title h2 {
color:black;
font-family:Tahoma,Geneva,Verdana,sans-serif,Arial;
font-size:18px;
font-weight:normal;
margin:0;
padding:0;
}

JavaScript

$(document).ready(function() {
    
    $('.cp_post_container').hover(
        function() {
            $(this).find('.cp_post_text_box').animate({"top": "-=75px"}, 150);
        },
        function() {
            $(this).find('.cp_post_text_box').animate({"top": "+=75px"}, 150);
        }
    );

});