JSFiddle - React, Tailwind, and code Playground

HTML

<div class="base">
  <div class="slideup" id="test">
  le contenu qui slide
  </div>
  
</div>

CSS

.base {
  height: 200px;
  width: 350px;
   background-image: url("https://fakeimg.pl/350x200/?text=Image%20de%20base&font=lobster");
  overflow: hidden;
}

.slideup {
  height: 200px;
  width: 350px;
  text-align: center;
  margin-top: 200px;
  padding-top: 20px;
  z-index: 2;
}

#test {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8y/DfBwAGSAJKrWcj0wAAAABJRU5ErkJggg==);
  background-repeat: repeat;
}

JavaScript

$(function() {
  $('.base').on('mouseenter', function() {
    $(this).find('.slideup').stop().animate({
      'margin-top': 0
    }, 500);
  }).on('mouseleave', function() {
    $(this).find('.slideup').stop().animate({
      'margin-top':200
    }, 500)
  })

})