Patrick Fiedorowicz |  15.02.2013 | CSS & HTML, jQuery

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

  1. Nici Nici 19.05.2013
    Sehr schöner Effekt, gefällt mir gut :)
  2. Tomasz Dudek Tomasz Dudek 02.07.2013
    Ja, cool cool! Den Zoom-In-Effekt wollte ich auf meiner Seite eigentlich auch machen. Dann habe ich aber noch ein wenig rumgespielt und ein "Hovereffekt" erzeugt. Schau mal rein. Viele Grüße, Tomasz
    1. Patrick Fiedorowicz Patrick Fiedorowicz 02.07.2013
      Hi Tomasz,

      dein Ergebnis gefällt mir sehr gut! Schön dezent, aber dennoch auffallend.

      Schöne Grüße
      Patrick
  3. Andreas Andreas 09.10.2017
    Sehr schöner Effekt, Danke!

Neuen Kommentar schreiben

Deine E-Mail-Adresse wird nicht veröffentlich. Bitte gib Sie an, um dein Gravatar-Bild anzuzeigen.

Zurück zu allen News