Principaux points à retenir
- Les effets de survol d'image CSS dans Elementor prennent deux mesures : ajouter un nom de classe au widget Image sous Advanced, CSS Classes, puis coller une règle CSS qui cible cette classe.
- Les cinq effets de survol d'image CSS dans ce guide sont un zoom à l'intérieur du cadre, une échelle de gris à la couleur, un lift avec une ombre, une superposition sombre et une légende qui glisse vers le haut.
- Elementor Pro a une boîte CSS personnalisée dans l'onglet Avancé de chaque widget, et sans Pro, le même CSS peut aller dans Apparence, Personnalisation, CSS supplémentaire.
- Le widget Image d'Elementor imprime sa légende sous forme de légende à l'intérieur d'une figure, ce qui rend possible une légende glissante avec CSS seul.
- Les changements d'échelle de gris en couleur et d'opacité ne nécessitent aucun CSS dans Elementor, car l'onglet Style du widget Image comporte déjà des filtres CSS et de l'opacité sur un onglet Survoler.
Les effets de survol d'image CSS fonctionnent dans Elementor de la même manière qu'ils fonctionnent n'importe où : une classe sur l'élément et une règle avec :hover. Les seules parties spécifiques à l'élémenteur sont l'endroit où vous tapez la classe et l'endroit où vous collez le CSS. Vous trouverez ci-dessous cinq effets que vous pouvez copier, chacun testé sur l'élémenteur 4.3 avec le widget Image standard.
Si vous préférez ne pas toucher au code, la dernière section affiche l'itinéraire sans code avec le Widget Effets de survol d'image.
Table des matières
Comment fonctionnent les effets du survol CSS dans Elementor
Chaque extrait ci-dessous suit le même modèle Vous donnez une classe au widget Image, et le CSS change l'image à l'intérieur de ce widget lorsque le pointeur est dessus.
- Sélectionnez le widget Image dans Elementor.
- Ouvrir le Avancé tab et trouver Classes CSS.
- Tapez le nom de la classe sans point, par exemple
hover-zoom. - Ajoutez une fois le CSS correspondant à votre site. Toute image avec cette classe obtient alors l'effet.
La classe atterrit sur l'élément extérieur du widget et l'image est un img à l’intérieur, donc les règles visent .hover-zoom img.
Où ajouter le CSS
Vous avez quatre endroits pour coller CSS, selon ce qui est installé.
| Place | Besoins | S'applique à |
|---|---|---|
| Widget, avancé, CSS personnalisé | Élémenteur Pro | Ce widget |
| Paramètres du site, CSS personnalisé | Élémenteur Pro | Tout le site |
| Apparence, personnaliser, CSS supplémentaire | WordPress uniquement | Tout le site |
| Extension CSS personnalisée | Additions maîtres | L'élément auquel vous l'ajoutez |
Pour les cours que vous prévoyez de réutiliser, un endroit à l'échelle du site est la meilleure maison Le Extension CSS personnalisée page explique comment fonctionne l'option Master Addons.
5 effets de survol d'image CSS à copier
Chaque effet a un nom de classe, le CSS et une capture d'écran du résultat avant et pendant le survol.
1. Zoomez à l'intérieur du cadre
L'image s'échelle tandis que sa boîte reste de la même taille Nom de la classe : hover-zoom.
.hover-zoom { overflow: hidden; border-radius: 10px; }
.hover-zoom img { transition: transform 0.4s ease; display: block; }
.hover-zoom:hover img { transform: scale(1.08); }
2. Niveaux de gris à la couleur
L'image est en noir et blanc et devient couleur sur le vol stationnaire. Nom de la classe : hover-color.
.hover-color img { filter: grayscale(100%); transition: filter 0.4s ease; }
.hover-color:hover img { filter: none; }
3. Soulevez avec une ombre
L'image monte de quelques pixels et gagne une ombre douce, comme une carte qui est ramassée Nom de la classe : hover-lift.
.hover-lift img { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover img { transform: translateY(-6px); box-shadow: 0 18px 30px rgba(0, 0, 0, 0.18); }
4. Superposition sombre
Une couche sombre s'efface sur l'image Elle est construite avec un pseudo-élément, donc aucun balisage supplémentaire n'est nécessaire Nom de la classe : hover-dim.
.hover-dim { position: relative; }
.hover-dim::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.hover-dim:hover::after { opacity: 1; }
5. Légende qui glisse vers le haut
La propre légende de l'image se cache sous le bord inférieur et glisse vers le haut sur le vol stationnaire Dans le widget Image, définir Légende pour personnaliser la légende et taper le texte en premier. Nom de la classe : hover-caption.
.hover-caption figure { position: relative; overflow: hidden; margin: 0; }
.hover-caption figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 14px 18px; background: rgba(0, 0, 0, 0.6); color: #fff; transform: translateY(100%); transition: transform 0.35s ease; }
.hover-caption:hover figcaption { transform: translateY(0); }
Celui-ci dépend de la légende qui est là Sans légende, Elementor n'imprime pas la figure et la figcaption, et la règle n'a rien à bouger.
CSS ou les paramètres de vol stationnaire intégrés ?
Vérifiez les propres commandes d'Elementor avant d'écrire CSS, car deux de ces cinq effets existent sous forme de paramètres L'onglet Style du widget Image comporte un onglet Survoler avec Opacité, Filtres CSS et Animation Survoler.
| Effet | Intégré à Elementor ? | Pourquoi utiliser CSS |
|---|---|---|
| Échelle de gris à la couleur | Oui, Filtres CSS, Saturation | Une classe pour de nombreuses images |
| Zoom | En partie. Grow s'agrandit au-delà du cadre. | Pour garder le zoom à l'intérieur du cadre |
| Soulever avec ombre | Non | Elementor n'a pas de paramètre pour cela |
| Superposition sombre | Non, sur le widget Image | Nécessaire à moins que vous enveloppiez l'image dans un conteneur |
| Légende glissante | Non | Nécessaire sauf si vous utilisez un widget de survol |
Les paramètres intégrés sont couverts étape par étape comment ajouter des effets de survol d'image dans Elementor. La technique générale est documentée sur Page de MDN pour la pseudo-classe : hover.
L'itinéraire sans code
CSS convient aux effets simples sur l'image elle-même Une fois que vous voulez un titre et une description qui s'animent sur l'image, le CSS se développe rapidement, et vous devez le maintenir à chaque changement de conception.
Le widget Effets de survol d'image dans Master Addons remplace celui-ci par un dropdown Il a 30 effets, un titre et une description pour chaque image, et des contrôles d'onglets Style pour les couleurs et le type.
Voyez-les en direct. Le Page de widget d'effets de survol de l'image a huit cartes à survoler et une table des 30 effets.
Questions fréquemment posées
Comment ajouter des effets de survol CSS à une image dans Elementor ?
Sélectionnez le widget Image, ouvrez l'onglet Avancé et tapez un nom de classe dans les Classes CSS Puis ajoutez une règle CSS pour cette classe avec : hover, par exemple .hover-zoom : hover img {transformer : scale (1.08) ; }. Collez le CSS dans le CSS personnalisé d'Elementor Pro ou dans Apparence, Personnaliser, CSS supplémentaire.
Où mettre CSS personnalisé dans Elementor sans Pro ?
Allez dans Apparence, Personnaliser, CSS supplémentaire dans le tableau de bord WordPress et collez-le là Le CSS se charge sur chaque page, donc n'importe quel widget avec la classe correspondante le récupère Une extension CSS personnalisée à partir d'un addon est une autre option.
Pourquoi mon effet de survol CSS ne fonctionne-t-il pas dans Elementor ?
Les causes habituelles sont un point tapé dans le champ Classes CSS, un nom de classe qui ne correspond pas au CSS, ou une feuille de style en cache Tapez la classe sans point, comparez l'orthographe, puis effacez votre plugin cache et les fichiers d'Elementor sous Outils.
Puis-je faire un zoom image en vol stationnaire sans qu'il déborde ?
Oui. Définir le débordement sur caché sur le widget qui transporte la classe et mettre à l'échelle l'img à l'intérieur. Le widget conserve sa taille et coupe l'image agrandie Le premier extrait de ce guide le fait.
Les effets de survol CSS fonctionnent-ils sur mobile ?
Les téléphones n'ont pas d'état de vol stationnaire, donc l'effet ne s'affiche jamais ou ne s'affiche jamais après un robinet et reste jusqu'à ce que le visiteur touche ailleurs. Traitez les effets de vol stationnaire comme une décoration sur de petits écrans et gardez tout texte important visible sans eux.
Réflexions finales
Les effets de survol d'image CSS dans Elementor nécessitent une classe sur le widget Image et une règle courte. Les cinq couvrent ici le zoom, la couleur, l'élévation, la superposition et une légende glissante, et chacun peut être ajusté en modifiant une ou deux valeurs.
Lorsque l'effet souhaité inclut du texte sur l'image, le Widget Effets de survol d'image vous y amène sans maintenir CSS.
Lecture connexe
