JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <div class="overlay anim">
        Overlay
    </div>
</div>

CSS

.box {
    height: 250px;
    width: 250px;
    background: aqua;
    position: relative;
    overflow: hidden;
}

.overlay {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    color: white;
    padding: 10px;
    left:-999px;
    bottom: 0;
}

.box .overlay.anim {
    animation-name: overlay-out;
    animation-duration: 1000ms;
    animation-fill-mode: none;
}

.box:hover .overlay {
    animation-name: overlay-in;
    animation-duration: 600ms;
    animation-fill-mode: forwards;
}

@keyframes overlay-in {
  from {
    left: -999px;
  }

  to {
    left: 0;
  }
}

@keyframes overlay-out {
  from {
    left: 0;
  }

  to {
    left: 999px;
  }
}

JavaScript

$(function() {
    $('.box .overlay').removeClass('anim');
    $('.box').on('mouseout', function() {
        $(this).find('.overlay').addClass('anim');
    });
});