Sidebar-Login einfliegen lassen

[xOneDirectionx]

Huhu

ich möchte ein Loginfeld, das bei Maushover von rechts eingeflogen kommt. Also ähnlich wie hier der Styleswitcher, nur größer, auf der anderen Seite und andere Farben/Inhalt. Allerdings hab ich keine Lust, mich hier durch den ganzen HTML/CSS-Code zu kämpfen und die benötigten Teile rauszusuchen.

Wie ich es mir ungefähr vorstelle, ist auf abalo media GmbH zu sehen. Nur will ich nicht erst auf Login klicken lassen, sondern beim Hover soll das Feld schon ausfahren.

Zum Googlen hab ich wohl die falschen Stichwörter verwendet. Kann mir hier jemand helfen oder einfach sagen, wonach ich googlen kann, um einen Sample-Code zu finden? Umbauen kann ich es ganz alleine.

[DMW007]

Der Designswitcher wurde mit CSS3 Transitions gemacht.

<div class="switch">
    <div class="color-palette" title="Farbstyl ändern"></div>
    <a href="{vb:raw vboptions.bburl}forum.php?styleid=11"><div class="blue"></div></a>
    <a href="{vb:raw vboptions.bburl}/forum.php?styleid=15"><div class="orange"></div></a>
</div>

.switch .blue, .switch .orange, .switch .color-palette {

    background:url(images/uhacks_orange/sprite-main-switch.png) no-repeat;

}

.switch .color-palette {

    height: 32px;

    width: 32px;

    background-position: 0 0;

}

.switch .blue, .switch .orange {

    height: 15px;

    width: 24px;

}

.switch .blue {

    background-position: 0 -32px;

}

.switch .orange {

    background-position: -24px -32px;

}

.switch {

    position: fixed;

    left: -35px;

    top: 70px;

    width: 24px;

    padding: 10px 10px 10px 15px;

    background-color: #333;

    box-shadow: 0 0 0 3px rgba(0,0,0,0.1);

    border-radius: 5px;

    z-index: 1000;

    -moz-transition: all 0.3s ease 0s;

    -webkit-transition: all 0.3s ease 0s;

    -o-transition: all 0.3s ease 0s;

    -ms-transition: all 0.3s ease 0s;

}

.switch img {

    margin-bottom: 0px;

}

.switch:hover {

    left:-10px;

}

.switch a:hover {

    position: relative;

    left: 2px;

}