JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<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;
 }

#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': 100
    }, { duration: 800, easing: 'easeOutBounce' });
  }).on('mouseleave', function() {
    $(this).find('.slideup').stop().animate({
      'margin-top': 200
    },{ duration: 800, easing: 'easeOutBounce' })
  })

})