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

window.addEvent('domready', function(){
    
    var scrollInOut = $$('.cp_post_text_box');

    scrollInOut.set('morph', {
        duration: 150
    });

    scrollInOut.addEvents({

        mouseenter: function(){
            // this refers to the element in an event
                this.morph({
                    'top': 40
                });
        },

        mouseleave: function(){
            // this refers to the element in an event
            this.morph({
               'top': 115
            });
        }

    });

    var scrollInOutPicture = $$('.cp_post_picture');

    scrollInOutPicture.addEvents({

        mouseenter: function(){
            // this refers to the element in an event
            $(this).getFirst('.cp_post_text_box').fireEvent("mouseenter");

        },

        mouseleave: function(){
            // this refers to the element in an event
            $(this).getFirst('.cp_post_text_box').fireEvent("mouseleave");
        }

    });

});