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($) {
    
$(".info").hover(
  function () {
      $(this).stop().animate({opacity:0.5, marginTop: '-=50px'});
  }, 
  function () {
      $(this).stop().animate({opacity:1, marginTop: '0px'});
  }
);

    
});