---
title: "Configurer l'effet au survol des vignettes"
description: "Comment activer et ajuster l'effet au survol dans le composant WebPart Vitextra Smart Tiles : les neuf effets — flou, luminosité, contraste, niveaux de gris, rotation de teinte, inversion des couleurs, opacité, saturation et sépia —, les unités d'intensité, le paramètre Duration, le comportement de l'effet au focus du clavier et avec la réduction des animations, ainsi que les réglages recommandés."
url: https://vitextra.com/fr/support/kb/10248
language: fr
published: 2026-10-13
modified: 2026-10-13
products:
  - "Smart Tiles"
author: "Lidija Reising"
tags: ["effet au survol vignette SharePoint", "survol Smart Tiles", "animation au passage de la souris sur une vignette", "luminosité au survol vignettes", "effet niveaux de gris au survol", "effet de flou vignettes", "durée de transition au survol", "focus clavier vignettes", "réduire les animations WebPart SharePoint", "effets Vitextra Smart Tiles"]
---

# Configurer l'effet au survol des vignettes

Comment activer et ajuster l'effet au survol dans le composant WebPart Vitextra Smart Tiles : les neuf effets — flou, luminosité, contraste, niveaux de gris, rotation de teinte, inversion des couleurs, opacité, saturation et sépia —, les unités d'intensité, le paramètre Duration, le comportement de l'effet au focus du clavier et avec la réduction des animations, ainsi que les réglages recommandés.

## Introduction

Une vignette qui réagit lorsque le pointeur l'atteint indique au visiteur « ceci est un bouton » avant même qu'il clique. [Smart Tiles](https://vitextra.com/fr/products/smart-tiles) propose neuf réactions de ce type, d'un léger assombrissement à une inversion complète des couleurs, chacune avec une intensité réglable et un temps de transition. Cet article décrit les paramètres, ce que fait chaque effet et quelles combinaisons fonctionnent bien.

## Activer l'effet

1. Ouvrez la page en mode édition et cliquez sur **Edit web part** pour ouvrir le volet de propriétés.
2. Dans le groupe **Appearance**, activez **Hover Effect**. Trois autres contrôles apparaissent sous le bouton bascule.
3. Choisissez l'effet dans la liste **Effect**.
4. Réglez l'intensité avec le curseur situé sous la liste. Son libellé — **Percentage (%)**, **degrees** ou **pixels** — dépend de l'effet.
5. Réglez la **Duration** de la transition, de 0 à 5 secondes par pas de 0,1.

Déplacez le pointeur sur une vignette de la page pour voir le résultat ; les paramètres sont appliqués immédiatement.

![Les paramètres de l'effet au survol](https://static.vitextra.com/articles/10248/hover-effect-settings-fr.png)
*Les paramètres de l'effet au survol*

## Les neuf effets

Les effets sont les filtres d'image du navigateur appliqués à toute la vignette — arrière-plan, icône et textes ensemble. Ils se répartissent en deux groupes selon la signification de leur intensité.

**Effets pour lesquels 100 % correspond à l'original.** Des valeurs plus faibles réduisent la propriété ; la vignette redevient normale lorsque le pointeur la quitte.

|::Effet::|::À des valeurs plus faibles::|
|:---|:---|
|**Brightness**|La vignette s'assombrit. 70–85 % donne un aspect « enfoncé » classique ; 0 % donne du noir.|
|**Contrast**|Les couleurs s'aplatissent vers le gris. 50 % donne une vignette douce et délavée.|
|**Saturation**|Les couleurs se fanent vers le gris tout en conservant la luminosité. 0 % donne une vignette monochrome.|
|**Opacity**|La vignette devient translucide et la page transparaît. 70–80 % est subtil ; 0 % fait disparaître la vignette.|

**Effets pour lesquels 0 % correspond à l'original.** Des valeurs plus élevées appliquent davantage l'effet.

|::Effet::|::À des valeurs plus élevées::|
|:---|:---|
|**Grayscale**|Les couleurs sont supprimées ; 100 % donne une vignette en noir et blanc.|
|**Sepia**|La vignette prend une teinte brunâtre chaude ; 100 % donne une vignette entièrement sépia.|
|**Color Inverting**|Les couleurs sont inversées ; 100 % transforme une vignette blanche en noir et le bleu en orange. 20–30 % donne un changement perceptible mais pas choquant.|

**Effets avec d'autres unités.**

|::Effet::|::Unité et comportement::|
|:---|:---|
|**Hue Rotate**|Degrés, 0–360. Décale toutes les couleurs de la vignette sur le cercle chromatique : à 180°, le bleu devient orange et le vert devient magenta ; 360° correspond de nouveau à l'original. De petites valeurs (15–30°) donnent un décalage vivant qui reste dans la même famille que la couleur d'origine.|
|**Blur**|Pixels, 0–20. Adoucit la vignette ; 1–2 px donne un léger changement de netteté, 5 px et plus rend le titre illisible.|

![Les neuf effets à des intensités typiques](https://static.vitextra.com/articles/10248/nine-effects-fr.png)
*Les neuf effets à des intensités typiques*

L'intensité de chaque unité est mémorisée séparément : passer de **Brightness** à 70 % à **Hue Rotate**, puis revenir en arrière, rétablit les 70 %.

## Duration

**Duration** est le temps que met la vignette pour passer de son aspect normal à l'effet — et pour revenir à l'aspect normal lorsque le pointeur la quitte. À 0, le changement est instantané ; 0,2–0,4 s donne une impression de réactivité ; au-delà de 1 s, cela semble lent pour de la navigation. La transition s'effectue dans les deux sens : une vignette ne « saute » donc jamais brusquement à son état initial.

## Clavier et accessibilité

L'effet est appliqué non seulement sous le pointeur, mais aussi lorsqu'une vignette reçoit le **focus du clavier** : les visiteurs qui naviguent avec la touche Tab obtiennent ainsi le même retour visuel que ceux qui utilisent une souris.

Lorsque le système d'exploitation est configuré pour réduire les animations — *Reduce motion* sous macOS et iOS, *Animation effects* désactivé sous Windows —, la transition est ignorée : l'effet apparaît quand même, mais instantanément, sans animation.

📝 **Remarque**  
Les effets sont définis par composant WebPart. Deux composants WebPart Smart Tiles sur la même page peuvent utiliser des effets différents, ou l'un d'eux aucun effet.

## Réglages recommandés

- **Choix par défaut :** Brightness 80 %, Duration 0,2 s. Fonctionne sur les vignettes colorées, sur les photographies et dans les thèmes sombres.
- **Subtil, pour les panneaux monochromes :** Contrast 60 % ou Saturation 40 %, Duration 0,3 s. La vignette survolée s'adoucit sans changer de couleur.
- **Ludique :** Hue Rotate 20°, Duration 0,4 s. La vignette passe à une teinte voisine, puis revient.
- **Vignettes avec photo :** Opacity 85 % ou Brightness 75 % ; Blur 1 px donne un changement de netteté semblable à celui d'un objectif.
- **Évitez** Color Inverting et Hue Rotate à des valeurs élevées sur les vignettes aux couleurs de la marque — la vignette survolée afficherait des couleurs qui ne sont pas les vôtres.

❗ **Important**  
L'effet modifie toute la vignette, y compris le texte. Vérifiez que le titre reste lisible à l'intensité choisie — avec Brightness sous 50 % ou Opacity sous 60 %, le texte blanc sur une vignette sombre devient difficile à lire au moment précis où le visiteur s'apprête à cliquer.

💡 **Astuce**  
Les autres paramètres du groupe **Appearance** sont décrits dans [KB10042. Comment ajouter et configurer le composant WebPart Smart Tiles](https://vitextra.com/fr/support/kb/10042).