JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image">
  <img src="http://theme-fusion.com/avada/wp-content/uploads/2012/08/port_slide_10-300x214.jpg">
  <div class="caption">
      Aliquam Quis Tortor
  </div>
</div>
    <div class="image">
  <img src="http://theme-fusion.com/avada/wp-content/uploads/2012/08/port_slide_10-300x214.jpg">
  <div class="caption">
      Aliquam Quis Tortor
  </div>
</div>
        <div class="image">
  <img src="http://theme-fusion.com/avada/wp-content/uploads/2012/08/port_slide_10-300x214.jpg">
  <div class="caption">
      Aliquam Quis Tortor
  </div>
</div>

CSS

.image{
    position: relative;
    width: 300px;
    height: auto;
    overflow: hidden;
    background: #000;
    float:left;
    
}
.image img{
    display: block;
    width: 100%;
    transition: all 0.4s;
}
.image .caption{
    position: absolute;
    bottom: -40px;
    left: 0px;
    right: 0px;
    padding: 10px;
    background: #000;
    color: #fff;
    transition: all 0.3s;
}
.image:hover .caption{
    bottom: 0px;
}
.image:hover img{
	-webkit-transform: translateY(-30px);
	-moz-transform: translateY(-30px);
	-ms-transform: translateY(-30px);
	transform: translateY(-30px);
}