Mouseover-Effekte mit CSS

Wir hatten Mouseover-Effekte in unserem Adventskalender verwendet und daraufhin mehrfach Anfragen zu deren Funktionsweise bekommen. Das wollen wir zum Anlass nehmen und heute eine kurze Anleitung für die Umsetzung bereitstellen.

Diese Animations-Effekte werden mit der CSS Eigenschaft transition realisiert, die leider im Internet Explorer erst ab der Version 10 unterstützt wird. In älteren Versionen des Internet Explorers werden die Transitions-Effekte ignoriert und die Mouseover-Effekte bleiben ohne Überblendung. Um auch die älteren Browser anzusprechen könnte der Effekt z.B. über jQuery realisiert werden:

$(‘#kalender’).fadeIn();

Mouseover-Effekt bei Bildern (img:hover)

Für unser Beispiel bauen wir uns ein kleines html-Gerüst mit einem div-Container, der unsere Bilder umschließt. Damit können wir den Effekt auf die Bilder im Container beschränken.

<div id=”kalender”>
<img src=”PFAD BILD 1″>
<img src=”PFAD BILD 2″>
<img src=”PFAD BILD 3″>
</div>

1. Nehmen wir an, ihr wollt ein Bild mit einem Mouse-over Effekt versehen. Dann ist der erste Schritt die entsprechenden Formatierungen festzulegen. In unserem Beispiel die Hintergrundfarbe (background-color) und die abgerundeten Ecken (border-radius).

#kalender img:hover {
background-color: #CDCBC7;
border-radius: 70px;
}

2. Damit das ganze ein- bzw. ausgeblendet wird, müssen wir außerdem für das Bild den Transition-Effekt definieren.

#kalender img {
transition-property: border-radius, background-color;
transition-duration: 0.5s;
transition-timing-function: ease-out;
}

Unter transition-property tragen wir die Eigenschaften ein, die den Effekt erhalten. Über transition-duration  können wir den Zeitraum bestimmen, in dem ein- bzw. ausgeblendet wird.

Das Verhalten während des Überblendzeitraums wird über die Zeitfunktion transition-timing-funcion gesteuert. Folgende Werte können bestimmt werden:

  • ease: Der Standardwert beginnt die Überblendung langsam, beschleunigt und endet langsam.
  • ease-in: Die Überblendung beginnt langsam und endet schnell.
  • ease-out: Die Überblendung startet schnell und endet langsam.
  • ease-in-out: Die Überblendung ist in der Mitte am schnellsteb und startet und endet langsam.
  • linear: Gleichmäßige Überblendung.
  • cubic-bezier:Die Überblendung wird über vier Werte (x1, y1, x2, y2) gesteuert. Die ersten beiden Angaben bestimmen die Geschwindigkeit am Anfang, der dritte und vierte Wert die Geschwindigkeit am Ende. Alle vier Werte müssen definiert werden.

Und so sieht der Mouseover-Effekt mit den Einstellungen oben aus:

Webwiese Logo

Es lohnt sich mit den Einstellungen zu spielen, um das gewünschte Ergebnis zu erhalten.

Viel Spaß beim Ausprobieren!