JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item">
    <div class="block"></div>
    <div class="info">
           My info
    </div>
</div>

CSS

.item {
    background: #ccc;
  width: 200px;
    height: 300px;
}
.block {
    height: 50px;
    background: red;
    width: 100%;
}
.info{
    background: green;
    height: 20px;
    width: 100%;
}

JavaScript

jQuery(document).ready(function($) {
    $(".item").mouseout(function(){
        $(this).find('.info').css('marginTop', '0');
    }).mouseover(function(){
        $(this).find('.info').animate({ MarginTop: '-50px', opacity: 0.5 }, 1000);
    });
});