CSS - Transition

[Huay]

Hallo,

kurz Erklärt: Ich möchte, dass sobald man über die DIV mit der Maus drüberfährt sich die Hintergrundfarbe ändert.

Bis jetzt klappt auch alles, nur ist der Verlauf wie sich die Farbe ändert nicht so wie ich es will.

CSS:

#header #nav-1 {
        float:left;   
        width:121px;
        height:88px;
        background-color:#313131;
        border-right:0px solid #222222;
        border-bottom:6px solid #E3350D;
        border-bottom-left-radius:7px;
        -webkit-transition: background-color 1000ms linear;
            -moz-transition: background-color 1000ms linear;
            -o-transition: background-color 1000ms linear;
            -ms-transition: background-color 1000ms linear;
    }

    #header #nav-1:hover {
        background-color:#E3350D;
    }

Ich möchte, dass sich der Hintergrund von oben nach unten ändert.
Bild:

Wie ihr sehen könnt, ist der untere Border rot. Beim Hover soll sich der Hintergrund in die selbe Farbe ändern, der Verlauf soll aber so verlaufen, dass sich die Farbe von unten nach oben ändert und nicht überall.

Sprich, dass es so aussehen soll:

Und nach 1 Sekunde soll die ganze DIV so rot sein, nur leider weiß ich nicht wie ich den Verlauf ändern soll.

 

[Banana_Jones]

Möglicherweise lässt sich das über einen Gradient lösen, mein Ansatz wäre aber gewesen, beim Hover ein separates Element mit rotem Background von 0 auf 100% wachsen zu lassen.

 

[Matthias Lang]

Hi,

ich hätte hier einen Lösungsvorschlag, hoffe du hast das so gemeint:

    #header {
        float:left;
        width:121px;
        height:88px;
        background-color:#E3350D;
        border-right:0px solid #222222;
        border-bottom:6px solid #E3350D;
        border-bottom-left-radius:7px;
    }
 
    #nav-1 {
        float:left;
        width:121px;
        height:88px;
        background-color:#313131;
        -webkit-transition: height 1000ms linear;
            -moz-transition: height 1000ms linear;
            -o-transition: height 1000ms linear;
            -ms-transition: height 1000ms linear;
        z-index: 1;
    }

    #nav-1:hover {
        height:0px;
    }