Bilder-Hover auffällig animieren mit CSS3

Bild: keoshi (CC BY-NC-SA 2.0)

Ich werde öfters gefragt, wie ich die hübsche, auffällige Bilder-Animation beim Überfahren (Hover) auf meiner Website umgesetzt habe. Hierzu ein kleines Tutorial, wie das selbst recht einfach mit reinem CSS3 umgesetzt werden kann.

Für die HTML-Struktur benötigt man ein Bild und einen Container außen rum, das kann z. B. ein DIV oder FIGURE sein. Ich benutze gerne den HTML5-Tag FIGURE, weil dieser genau für solche Vorhaben konzipiert wurde.

<figure>
    <img src="http://farm6.staticflickr.com/5168/5247594686_3bcdec0957.jpg" alt="Mein Bild" />
</figure>

Nun zum CSS-Teil, um beide Elemente grundsätzlich zu formatieren:

figure {
    display: inline-block;
    background: white;
    border: 1px solid black;
    overflow: hidden;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
}
figure img {
    display: block;
    margin: 0;
    padding: 0;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
}

Und nun noch etwas CSS, um den Hover-Effekt abzubilden:

figure:hover {
    background: #FFDB93;
    border: 1px solid orange;
}
figure:hover img {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    transform: scale(1.2);
    opacity: .5;
    filter: alpha(opacity=50);
}

Und fertig ist der nette Effekt mit reinem CSS.

Zur Erklärung: Beim Hover wird dem FIGURE eine Hintergrundfarbe gegeben und der Rahmen geändert. Gleichzeitig vergrößert sich das Bild selbst und bekommt 50% Transparenz, wodurch die Hindergrundfarbe des FIGURE durchscheint.

Übrigens sollte man dabei die Browser-Kompatibilität beachten, da noch nicht alle Browser die CSS3-Anweisungen verstehen. Dabei handelt es sich hauptsächlich um die Internet Explorer kleiner 10. Diese zeigen zwar den Effekt, allerdings ohne die weichen Übergänge.

Eine Demo vom Endergebnis kann man hier sehen: » Zur Demo

zurück zu allen News