Hover-Effekt

In diesem Tutorial erkläre ich euch wie man ganz schnell und einfach einen hübschen Hover-Effekt wie diesen hier hinbekommt:



Testhover (klick mich) Testhover (klick mich)

Schöner sieht es natürlich beispielsweise mit abgerundeten Ecken aus:



Testhover (klick mich) Testhover (klick mich)


Und wie funktioniert das Ganze nun?
Als erstes benötigt ihr eine kleine Graphik, welche die Hintergrund-Farbe eures Hovers haben sollte. Ihr könnt natürlich auch Muster oder anderes benutzen. Ich habe diesen Hintergrund verwendet:

Habt ihr die Graphik, geht es an den Code. Dafür müssen eigentlich lediglich ein paar Padding-Einstellungen gemacht werden. Ich verwende für die folgenden Codes die Einstellungen von dem ersten Beispiel ohne abgerundete Ecken. Wie man Ecken abrundet erfahrt ihr hier.

Bei dem ersten Hover, welcher sich beim Mouseover nach oben hin erweitert, wird folgender Code genutzt.

Ihr seht, dass euer Hintergrundbild als "background" definiert ist. Die Padding-Angaben stehen jeweils für die Abstände in der Reihenfolge: top, right, bottom, left. Beim Hover habe ich die Padding-Angabe für top erhöht, also wird der Abstand nach oben dann größer.

Bei dem zweiten Hover, welcher sich beim Mouseover nach rechts hin erweitert, wird folgender Code genutzt.

Beim Hover habe ich die Padding-Angabe für right erhöht, also wird der Abstand rechts dann größer.

Natürlich könnt ihr euren Hover auch mit ganz anderen Richtungen ausstatten. Top und right sind lediglich die zwei von mir gewählten Beispiele. Probieren geht über Studieren!