Imagehovering

Hovering Effekt von Backgroundbildern im EQdkp BOX-Layout

Nachfolgend wird eine Möglichkeit beschreiben, in der Artikelanzeige "BOX" die Hintergrundbilder zu vergrößern, wenn man mit der Maus über einen Artikel fährt.

Hier die CSS Anweisungen für den Hover-Effekt (Diese kann man in der Global CSS Section im ACP ablegen, zum Testen):

/** Hover Artikelbox Image ***/
/* verhindert, dass das vergrößerte Bild über die Box hinauswaechst */
.article-container.list-type4{
overflow: hidden;
}
/* sorgt fuer das "zurückzoomen" des Bildes */
.list-type4 .article-banner-image a{
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

/* vergroeßerung des Bildes beim ueberfahren mit der Maus */
.list-type4 .article-banner-image a:hover{
/* Zoom Faktor */
-webkit-transform:scale(1.3);
-moz-transform:scale(1.3);
-ms-transform:scale(1.3);
-o-transform:scale(1.3);
transform:scale(1.3);
/* Zeit des Zoomefektes von min bis max Zoom */
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}

Der Effekt lässt sich mit wenig Aufwand auch auf andere Elemente der Webseite übertragen.

Eins ist auch klar - keine Gewähr für einwandfreie Funktion oder Fehlerfreiheit.

Wenn ihr Verbesserungen dazu habt oder auch Fehlerkorrekturen, dann lasst es mich bitte wissen.