JSFiddle - React, Tailwind, and code Playground

by Avinashullal

HTML

<div class="bg">
	<img src="https://dummyimage.com/200x200/000/fff.jpg&text=IMG" alt="">
  <div class="box">
    <div>
      <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
      <p>Lorem ipsum dolor</p>
    </div>
  </div>
</div>

CSS

.bg {
  max-width: 300px;
  
  position: relative;
  overflow: hidden;
}

img {
  width: 100%; 
  display: block; /* remove blank space between img and .box */
}

.box {
  background-color: red;
  width: 100%;
  height: 20%;
  text-align: center; 
  
  position: absolute;
  bottom: 0px;
  
  -webkit-transition: 0.5s ease;
  -moz-transition:    0.5s ease;
  -o-transition:      0.5s ease;
}

.bg:hover .box {
  height: 100%;
}