JSFiddle - React, Tailwind, and code Playground

HTML

<div class="imgWrap">
  <img src="https://placeholdit.imgix.net/~text?txtsize=16&txt=257%C3%97200&w=257&h=200" alt="polaroid" />
  <p class="imgDescription">This image looks super neat.</p>
</div>

CSS

.imgWrap {
  position: relative;
  height: 200px;
  width: 257px;
  overflow: hidden;
}

.imgDescription {
  position: absolute;
  height: 100%;
  width: 100%;
  /* offset left fullsize of container 
  since overflow is hidden
  */
  top: calc(90% * 1);
  /* make sure there are no margins for full overlay*/
  margin: 0px 0px 0px 0px;
  background: rgba(29, 106, 154, 0.72);
  color: #fff;
  /* transition after hover (left to right)*/
  transition: .8s;
}

.imgWrap:hover .imgDescription {
  /* transition during hover (right to left)*/
  transition: .8s;
  top: 0px;
}