CODEWITHSUNDEEP
csscss-transitions
Dinklefarts
Dinklefarts

Reputation: 31

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!

Upvotes: 1

Views: 2704

Answers (2)

incalite
incalite

Reputation: 3207

  #footer {
        position: absolute;
        bottom:0;
        background-color: black;
        min-width: 100%;
        height:50px;
        font-family: Agency FB;
        transition: width 3s, height 1s, transform 1s;
    }
    #footer1 {
        text-align: center;
        color: #4e4e4e;
    }
    #footer:hover {
        opacity: .8;
        color: white;
        height: 100px;
    }
<div id="footer">
    <div id="footer1">
        <p> This should be a footer </p>
    </div>
</div>

Just play around with the values of transition: width 3s, height 1s, transform 1s;

Cheers!

Upvotes: 0

user6342059
user6342059

Reputation:

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

Upvotes: 2

Related Questions