JSFiddle - React, Tailwind, and code Playground

HTML

<div class="newsitem">
<img src="" alt="newsitem1">
   <div class="title">
   Silent Revolution
   </div>
</div>

CSS

.newsitem{
    position:relative;
    width:209px;
    height:118px;
    margin-right:40px;
    margin-top: 20px;
    margin-bottom: 20px;;
    float:left;
    overflow:hidden;
}

.newsitem img{
    width:209px;
    height:118px;
}

div.title{
    position:absolute;
    width:209px;
    bottom:0px;
    left:0px;
    height:0px;
    line-height:17px;
    font-size:0.75em;
    background-color:rgba(255,255,255,0.9);
    text-align:center;
}

JavaScript

$('.newsitem').hover(
    $(this).children('.text').animate({height:'34px'}),
    $(this).children('.text').animate({height:'0px'})
);