JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

      <div class="main-container">
        <img class="image" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97300&w=350&h=300">
        <div class="content">
         dsfsfsdfsd fsdf sdf
        </div>
      </div>

CSS

/* Set to 100% of col-md-6 */
.main-container {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}
/* Image Container */
.main-container > img.image {
  position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 300px;
	z-index: 100;
}
/* Overlay */
.main-container > .content {
  width: 100%;
	position: absolute;
	height: 150px;
	bottom: -110px;
	left: 0;
	right: 0;
	z-index: 101;
	padding: 10px 20px;
	background-color: rgba(52, 152, 219, 0.8);
	color: #ffffff;
	transition: all ease 0.5s;
}
/* Overlay Hover */
.main-container > .content:hover {
  bottom: 0px;
	transition: all ease 0.5s;
}