How to show a div from below of parent division with transition?

I am trying to show child div with the transition from the bottom of parent div on hovering on parent div.

Here is what I tried:

.parent {
  min-height: 370px;
}

.child {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 0;
  transition: height 2s;
}

.parent:hover child {
  height: 30px;
}

<div className="parent">
  <div className="child">View More</div>
</div>

But It is not working as even with height 0, “View More” is still visible and the transition is not working as well.

Answer

Try to add a class selector for child after hover .

And you can add transition for opacity for better effect)

.parent:hover .child {
  height:30px;
}