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.
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;
}