how to apply a transition to a child element when hovering over parent element
.parent {
background: red;
}
.child {
overflow: hidden;
height: 0;
background: blue;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
color: white;
}
.parent:hover > .child {
height: 30px;
display: block;
}