--- title: "Den Hover-Effekt für Kacheln konfigurieren" description: "So aktivieren und justieren Sie den Hover-Effekt im Vitextra Smart Tiles Webpart: die neun Effekte – Weichzeichnen, Helligkeit, Kontrast, Graustufen, Farbtondrehung, Farbe invertieren, Deckkraft, Sättigung und Sepia –, ihre Einheiten für die Stärke, die Einstellung Dauer, das Verhalten des Effekts bei Tastaturfokus und reduzierter Bewegung sowie empfohlene Einstellungen." url: https://vitextra.com/de/support/kb/10248 language: de published: 2026-10-09 modified: 2026-10-10 products: - "Smart Tiles" author: "Lidija Reising" tags: ["Kachel Hover-Effekt SharePoint", "Smart Tiles Hover", "Mouseover Kachel Animation", "Helligkeit Hover Kacheln", "Graustufen Hover-Effekt", "Weichzeichnen Effekt Kacheln", "Hover Dauer Übergang", "Tastaturfokus Kacheln", "Bewegung reduzieren SharePoint Webpart", "Vitextra Smart Tiles Effekte"] --- # Den Hover-Effekt für Kacheln konfigurieren So aktivieren und justieren Sie den Hover-Effekt im Vitextra Smart Tiles Webpart: die neun Effekte – Weichzeichnen, Helligkeit, Kontrast, Graustufen, Farbtondrehung, Farbe invertieren, Deckkraft, Sättigung und Sepia –, ihre Einheiten für die Stärke, die Einstellung Dauer, das Verhalten des Effekts bei Tastaturfokus und reduzierter Bewegung sowie empfohlene Einstellungen. ## Einführung Eine Kachel, die reagiert, wenn der Mauszeiger sie erreicht, sagt dem Besucher „das ist eine Schaltfläche", bevor er klickt. [Smart Tiles](https://vitextra.com/de/products/smart-tiles) bietet neun solcher Reaktionen, von einem sanften Abdunkeln bis zur vollständigen Farbumkehr, jede mit einstellbarer Stärke und Übergangszeit. Dieser Artikel beschreibt die Einstellungen, was jeder Effekt bewirkt und welche Kombinationen gut funktionieren. ## Den Effekt aktivieren 1. Öffnen Sie die Seite im Bearbeitungsmodus und klicken Sie auf **Webpart bearbeiten**, um den Eigenschaftenbereich zu öffnen. 2. Schalten Sie in der Gruppe **Darstellung** den **Hover-Effekt** ein. Unterhalb des Schalters erscheinen drei weitere Steuerelemente. 3. Wählen Sie den Effekt in der Liste **Effekt**. 4. Stellen Sie die Stärke mit dem Schieberegler unter der Liste ein. Seine Beschriftung – **Prozentsatz (%)**, **Grad** oder **Pixel** – hängt vom Effekt ab. 5. Stellen Sie die **Dauer** des Übergangs ein, von 0 bis 5 Sekunden in Schritten von 0,1. Bewegen Sie den Mauszeiger über eine Kachel auf der Seite, um das Ergebnis zu sehen; die Einstellungen werden sofort angewendet. ![Die Einstellungen des Hover-Effekts](https://static.vitextra.com/articles/10248/hover-effect-settings-de.png) *Die Einstellungen des Hover-Effekts* ## Die neun Effekte Die Effekte sind die Bildfilter des Browsers, angewendet auf die gesamte Kachel – Hintergrund, Symbol und Texte zusammen. Sie teilen sich danach, was ihre Stärke bedeutet, in zwei Gruppen. **Effekte, bei denen 100 % das Original ist.** Niedrigere Werte verringern die Eigenschaft; die Kachel kehrt zum Normalzustand zurück, wenn der Mauszeiger sie verlässt. |::Effekt::|::Bei niedrigeren Werten::| |:---|:---| |**Helligkeit**|Die Kachel wird dunkler. 70–85 % ergibt einen klassischen „gedrückten" Look; 0 % ist Schwarz.| |**Kontrast**|Die Farben flachen in Richtung Grau ab. 50 % ergibt eine weiche, verwaschene Kachel.| |**Sättigungsgrad**|Die Farben verblassen in Richtung Grau, während die Helligkeit erhalten bleibt. 0 % ist eine monochrome Kachel.| |**Deckkraft**|Die Kachel wird durchscheinend und die Seite scheint durch. 70–80 % ist dezent; 0 % lässt die Kachel verschwinden.| **Effekte, bei denen 0 % das Original ist.** Höhere Werte wenden mehr vom Effekt an. |::Effekt::|::Bei höheren Werten::| |:---|:---| |**Graustufen**|Die Farben werden entfernt; 100 % ist eine Schwarz-Weiß-Kachel.| |**Sepia**|Die Kachel erhält einen warmen bräunlichen Ton; 100 % ist eine vollständig sepiagetönte Kachel.| |**Farbe invertieren**|Die Farben werden umgekehrt; 100 % macht eine weiße Kachel schwarz und Blau zu Orange. 20–30 % ergibt eine spürbare, aber nicht störende Änderung.| **Effekte mit anderen Einheiten.** |::Effekt::|::Einheit und Verhalten::| |:---|:---| |**Schatten drehen**|Grad, 0–360. Verschiebt jede Farbe der Kachel entlang des Farbkreises: Bei 180° wird Blau zu Orange und Grün zu Magenta; 360° ist wieder das Original. Kleine Werte (15–30°) ergeben eine lebendige Verschiebung, die in der Familie der ursprünglichen Farbe bleibt.| |**Weichzeichnen**|Pixel, 0–20. Macht die Kachel weicher; 1–2 px ist ein sanfter Fokuswechsel, ab 5 px wird der Titel unlesbar.| ![Die neun Effekte in typischer Stärke](https://static.vitextra.com/articles/10248/nine-effects-de.png) *Die neun Effekte in typischer Stärke* Die Stärke jeder Einheit wird separat gemerkt: Ein Wechsel von **Helligkeit** bei 70 % zu **Schatten drehen** und zurück stellt die 70 % wieder her. ## Dauer **Dauer** ist die Zeit, die die Kachel braucht, um von ihrem normalen Aussehen zum Effekt zu wechseln – und wieder zurück, wenn der Mauszeiger sie verlässt. Bei 0 erfolgt der Wechsel sofort; 0,2–0,4 s fühlt sich reaktionsschnell an; alles über 1 s wirkt für eine Navigation träge. Der Übergang läuft in beide Richtungen, sodass eine Kachel nie „zurückschnappt". ## Tastatur und Barrierefreiheit Der Effekt wird nicht nur unter dem Mauszeiger angewendet, sondern auch, wenn eine Kachel den **Tastaturfokus** erhält, sodass Besucher, die mit der Tabulatortaste navigieren, dieselbe Rückmeldung erhalten wie Besucher mit einer Maus. Wenn das Betriebssystem auf reduzierte Bewegung eingestellt ist – *Bewegung reduzieren* unter macOS und iOS, *Animationseffekte* aus unter Windows –, wird der Übergang übersprungen: Der Effekt erscheint weiterhin, aber sofort, ohne Animation. 📝 **Hinweis** Effekte werden pro Webpart festgelegt. Zwei Smart-Tiles-Webparts auf derselben Seite können unterschiedliche Effekte verwenden, oder eines von ihnen gar keinen. ## Empfohlene Einstellungen - **Standardwahl:** Helligkeit 80 %, Dauer 0,2 s. Funktioniert auf farbigen Kacheln, auf Fotos und in dunklen Designs. - **Dezent, für monochrome Panels:** Kontrast 60 % oder Sättigungsgrad 40 %, Dauer 0,3 s. Die Kachel unter dem Mauszeiger wird weicher, ohne ihre Farbe zu ändern. - **Verspielt:** Schatten drehen 20°, Dauer 0,4 s. Die Kachel wechselt zu einem benachbarten Farbton und zurück. - **Fotokacheln:** Deckkraft 85 % oder Helligkeit 75 %; Weichzeichnen 1 px ergibt einen objektivähnlichen Fokuswechsel. - **Vermeiden Sie** Farbe invertieren und Schatten drehen mit hohen Werten auf Kacheln mit Markenfarben – die Kachel unter dem Mauszeiger zeigt Farben, die nicht Ihre sind. ❗ **Wichtig** Der Effekt verändert die gesamte Kachel, einschließlich des Textes. Prüfen Sie, ob der Titel bei der gewählten Stärke lesbar bleibt – Helligkeit unter 50 % oder Deckkraft unter 60 % macht weißen Text auf einer dunklen Kachel genau in dem Moment schwer lesbar, in dem der Besucher klicken will. 💡 **Tipp** Die übrigen Einstellungen der Gruppe **Darstellung** sind in [KB10042. So fügen Sie das Smart-Tiles-Webpart hinzu und konfigurieren es](https://vitextra.com/de/support/kb/10042) beschrieben. Weitere Informationen zum Produkt: