JSFiddle - React, Tailwind, and code Playground

HTML

<div class="news">
    <div class="descriptions"><p>lalala</p><p>lalala</p><p>lalala</p><p>lalala</p><p>lalala</p></div>
    <img src="http://www.volynnews.com/files/news/2009/07-13/8367-1m.jpg" alt="images" />
</div>

CSS

.news {
    width:200px;
    height:200px;
    background:#E2C7DE;
    position:relative;
    overflow:hidden;
}

.descriptions {
    position:absolute;
    width:200px;
    height:200px;
    bottom:-160px;
    background:rgba(58,226,206, 0.5);
}

JavaScript

$('.descriptions').hover(function(){

    $(this).animate({'bottom':'0'},600);

}, function(){

    $(this).animate({'bottom':'-160px'},600);
    
});