JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<div class="box">
  <div class="overlay">
    <div class="table">
      <div class="more_btn">
        <p>More</p>
      </div>
    </div>
  </div>
  <img src="https://avatars.yandex.net/get-music-content/34131/6489f950.p.82939/s400x400" width='200' height='200'>
</div>

CSS

.box {
  position: relative;
  overflow: hidden;
  width: 200px;
  text-align: center;
}

.box.open .overlay {bottom: 0;}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
  bottom: 100%;
  left: 0;
  right: 0;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.table {
  display: table;
  width: 100%;
  height: 100%;
}

.more_btn {
  display: table-cell;
  vertical-align: middle;
}

.more_btn p {
  border: 1px solid black;
  border-radius: 20px;
  padding: 20px 40px;
  cursor: pointer;
}

JavaScript

$('.box').on('mouseenter', function() {
	$(this).addClass('open');
});

$('.box').on('mouseleave', function() {
	$(this).removeClass('open');
});

$('.overlay').on('click', function() {
	$(this).parents('.box').removeClass('open');
});