Dinklefarts Dinklefarts - 3 months ago 10
CSS Question

Height Transition Not Working CSS

My codes are pretty simple yet I've failed to get how a transition works and how it doesn't work on my HTML right here:

<div id="footer">
<div id="footer1">
<p> This should be a footer </p>
</div>
</div>


and my CSS

#footer {
position: fixed;
bottom: 0;
background-color: black;
min-width: 100%;
font-family: Agency FB;
transition: width 3s;
}
#footer1 {
text-align: center;
color: #4e4e4e;

}
#footer:hover {

opacity: .8;
color: white;
height: 100px;
}


I don't see anything wrong with my code. That or I'm still inexperienced. Thanks!

Answer

Try this

#footer {
    position: fixed;
    bottom: 0;
    background-color: black;
    min-width: 100%;
    font-family: Agency FB;
    transition: height 3s;
    height: 50px;
}
#footer1 {
    text-align: center;
    color: #4e4e4e;

}
#footer:hover {

    opacity: .8;
    color: white;
    height: 100px;
}

If it doesn't work please tell me