Imagehovering

From EQdkp Plus
Revision as of 06:52, 16 August 2019 by Darklirah (talk | contribs) (Hovereffekt Box Layout Hintergrundbilder zoomen)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search


Hovering Effekt von Backgroundbuldern im Eqdkp BOX-Layout



Nachfolgend wird eine Möglichkeit beschreiben, in der Artikelnanzeige "BOX"

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 Elemete 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.