JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg" />
  
  <div class="hover">
    <div class="gray-image" />
    <div class="slide-box">
      <div class="text">
          <span>This is the title</span>
      </div>
    </div>
  </div>
</div>

SCSS

.wrapper {
  position: relative;
  
  img {
    width: 600px;
    height: 375px;
  }
  
  .hover {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 600px;
    height: 100px;
    animation-name: example2;
    animation-duration: 1s;
    display: none;
    
    .gray-image {
      width: 100%;
      height: 100%;
      background-image: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg');
      background-repeat: no-repeat;
      background-size: 600px 375px;
      background-position: bottom 0 left 0;
      
      filter: grayscale(100%);
      -webkit-filter: grayscale(100%);
      //position: absolute;
    }
    
    .text {
      color: #FFF;
      text-align: center;
      width: 100%;
      height: 100px;
      background-color: rgba(89, 89, 89, 0.9);
    }
  }
  
  &:hover {
    
    .hover {
      animation-name: example;
      animation-duration: 1s;
      height: 375px;
      display: block;
    }
  }
}

@keyframes example {
  from {
    height: 100px;
  }
  to {
    height: 375px;
  }
}

@keyframes example2 {
  from {
    height: 375px;
  }
  to {
    height: 100px;
  }
}