/CSS/How to apply a transition to a child element when hovering over parent element

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

Source: stackoverflow.com

Similar codes

1 vote214 views1 answer
CSS technique for a horizontal line with icons in the middle
CSS
0 vote225 views1 answer
Install webpack encore
CSS
9 votes230 views3 answers
Bootstrap list
CSS Bootstrap
0 vote220 views1 answer
Center a button wordpress
CSS
1 vote222 views2 answers
Brightness css
CSS
0 vote183 views1 answer
Affect top div opacity without affecting childrne
CSS
0 vote224 views1 answer
If child elemnt is hovered do changes to the container css
CSS
1 vote202 views2 answers
Css block
CSS
9 votes331 views3 answers
Console.log style css
CSS
0 vote222 views1 answer
Multer buffer undefined
CSS