/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

7 votes257 views2 answers
Transition css hover
CSS
0 vote231 views1 answer
Ssh into docker container ddev
CSS
13 votes247 views6 answers
Bootstrap Badges
CSS
0 vote228 views1 answer
Tf.reduce_mean(y_true,y_predicted)
CSS
3 votes243 views1 answer
How to use bulma in gatsby
CSS Bulma
3 votes244 views1 answer
Css second td in table
CSS
23 votes252 views2 answers
Center align in grid
CSS
2 votes194 views1 answer
How to bring default values in css
CSS
0 vote218 views1 answer
Css loader with gradient
CSS
22 votes231 views4 answers
Import font css from url
CSS