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!
  4. Nick Maul Nick Maul 19.12.2019
    Ich verzweifelt die letzten tage an einem bestimmten Problem, eventuell kann mir ja hier jemand helfen. Und zwar habe ich viele Bilder nebeneinander ohne Margin und ohne Padding, ich habe ein scaling von 1.1 beim hovern eingefügt. Zwar wird das Bild größer und hat einen shadow Effekt etc., jedoch überlappt es die Bilder Nebendran nicht. Was genau darf ich einfügen, damit ein Bild komplett in den Vordergrund gehoben wird? Mein Code ist sehr groß, weswegen ich ihn nicht ganz hier zeigen kann, jedoch habe ich einen kleinen Ausschnitt. Bin über jede Hilfe dankbar.
    //Css Code//
    .pic1 {
    position: relative;
    float: left;
    width: 20%;
    background: black;
    text-align: center;
    overflow:hidden;
    transition: transform .5s, filter 1.5s ease-in-out;
    filter:grayscale(95%);

    }
    .pic1:hover {
    filter: grayscale(0);
    transform: scale(1.1);
    position: relative;
    overflow: hidden;
    box-shadow: -15px -15px 15px rgba(0.1, 0.2, 0.3, 0.5);
    }
    //Css Code Ende//

Neue Antwort auf Kommentar schreiben

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

Zurück zu allen News