Difference between revisions of "Imagehovering"

From EQdkp Plus
Jump to navigation Jump to search
(Created page with "Hovering Effekt von Backgroundbuldern im Eqdkp BOX-Layout")
 
m (Hovereffekt Box Layout Hintergrundbilder zoomen)
 
Line 1: Line 1:
 +
[[Category:Tipps and Tricks]]
 +
 
Hovering Effekt von Backgroundbuldern im Eqdkp BOX-Layout
 
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):
 +
 +
<source lang="css">
 +
/** 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;
 +
}
 +
 +
 +
</source>
 +
 +
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.

Latest revision as of 06:52, 16 August 2019


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.