--- title: "Configuring the Hover Effect for Tiles" description: "How to enable and tune the hover effect in the Vitextra Smart Tiles web part: the nine effects — blur, brightness, contrast, grayscale, hue rotate, color inverting, opacity, saturation and sepia — their strength units, the Duration setting, how the effect behaves on keyboard focus and with reduced motion, and recommended settings." url: https://vitextra.com/en/support/kb/10248 language: en published: 2026-10-09 modified: 2026-10-10 products: - "Smart Tiles" author: "Lidija Reising" tags: ["tile hover effect SharePoint", "Smart Tiles hover", "mouse over tile animation", "brightness hover tiles", "grayscale hover effect", "blur effect tiles", "hover duration transition", "keyboard focus tiles", "reduce motion SharePoint web part", "Vitextra Smart Tiles effects"] --- # Configuring the Hover Effect for Tiles How to enable and tune the hover effect in the Vitextra Smart Tiles web part: the nine effects — blur, brightness, contrast, grayscale, hue rotate, color inverting, opacity, saturation and sepia — their strength units, the Duration setting, how the effect behaves on keyboard focus and with reduced motion, and recommended settings. ## Introduction A tile that reacts when the pointer reaches it tells the visitor "this is a button" before they click. [Smart Tiles](https://vitextra.com/en/products/smart-tiles) offers nine such reactions, from a gentle dimming to a full color inversion, each with an adjustable strength and a transition time. This article describes the settings, what each effect does and which combinations work well. ## Enabling the effect 1. Open the page in edit mode and click **Edit web part** to open the property pane. 2. In the **Appearance** group, switch on **Hover Effect**. Three more controls appear below the toggle. 3. Choose the effect in the **Effect** list. 4. Set the strength with the slider under the list. Its label — **Percentage (%)**, **degrees** or **pixels** — depends on the effect. 5. Set the **Duration** of the transition, from 0 to 5 seconds in steps of 0.1. Move the pointer over a tile on the page to see the result; the settings are applied immediately. ![The hover effect settings](https://static.vitextra.com/articles/10248/hover-effect-settings-en.png) *The hover effect settings* ## The nine effects The effects are the image filters of the browser applied to the whole tile — background, icon and texts together. They fall into two groups by what their strength means. **Effects where 100 % is the original.** Lower values reduce the property; the tile returns to normal when the pointer leaves. |::Effect::|::At lower values::| |:---|:---| |**Brightness**|The tile darkens. 70–85 % is a classic "pressed" look; 0 % is black.| |**Contrast**|Colors flatten toward gray. 50 % gives a soft, washed-out tile.| |**Saturation**|Colors fade toward gray while brightness is kept. 0 % is a monochrome tile.| |**Opacity**|The tile becomes translucent and the page shows through. 70–80 % is subtle; 0 % makes the tile vanish.| **Effects where 0 % is the original.** Higher values apply more of the effect. |::Effect::|::At higher values::| |:---|:---| |**Grayscale**|Colors are removed; 100 % is a black-and-white tile.| |**Sepia**|The tile takes a warm brownish tint; 100 % is a fully sepia-toned tile.| |**Color Inverting**|Colors are inverted; 100 % turns a white tile black and blue into orange. 20–30 % gives a noticeable but not jarring change.| **Effects with other units.** |::Effect::|::Unit and behavior::| |:---|:---| |**Hue Rotate**|Degrees, 0–360. Shifts every color of the tile around the color wheel: at 180° blue becomes orange and green becomes magenta; 360° is the original again. Small values (15–30°) give a lively shift that stays in the family of the original color.| |**Blur**|Pixels, 0–20. Softens the tile; 1–2 px is a gentle focus change, 5 px and more makes the title unreadable.| ![The nine effects at typical strengths](https://static.vitextra.com/articles/10248/nine-effects-en.png) *The nine effects at typical strengths* The strength of each unit is remembered separately: switching from **Brightness** at 70 % to **Hue Rotate** and back restores the 70 %. ## Duration **Duration** is the time the tile takes to change from its normal look to the effect — and back again when the pointer leaves. At 0 the change is instant; 0.2–0.4 s feels responsive; anything above 1 s feels slow for navigation. The transition runs in both directions, so a tile never "snaps" back. ## Keyboard and accessibility The effect is applied not only under the pointer but also when a tile receives **keyboard focus**, so visitors who navigate with the Tab key get the same feedback as those with a mouse. When the operating system is set to reduce motion — *Reduce motion* on macOS and iOS, *Animation effects* off in Windows — the transition is skipped: the effect still appears, but instantly, without animation. 📝 **Note** Effects are set per web part. Two Smart Tiles web parts on the same page can use different effects, or one of them none at all. ## Recommended settings - **Default choice:** Brightness 80 %, Duration 0.2 s. Works on colored tiles, on photographs and in dark themes. - **Subtle, for monochrome panels:** Contrast 60 % or Saturation 40 %, Duration 0.3 s. The hovered tile softens without changing its color. - **Playful:** Hue Rotate 20°, Duration 0.4 s. The tile shifts to a neighboring hue and back. - **Photo tiles:** Opacity 85 % or Brightness 75 %; Blur 1 px gives a lens-like focus change. - **Avoid** Color Inverting and Hue Rotate at high values on tiles with brand colors — the hovered tile shows colors that are not yours. ❗ **Important** The effect changes the whole tile, including the text. Check that the title stays readable at the chosen strength — Brightness below 50 % or Opacity below 60 % makes white text on a dark tile hard to read at the very moment the visitor is about to click. 💡 **Tip** The other settings of the **Appearance** group are described in [KB10042. How to Add and Configure the Smart Tiles Web Part](https://vitextra.com/en/support/kb/10042). Learn more about the product: