Effets de survol d'image d'élémenteur : 30 animations de survol pour les images
Une image statique se trouve juste là Ajouter des effets de survol d'image et la même image commence à faire du travail : un titre se glisse, une description s'estompe et un clic envoie les gens vers un lien ou ouvre une fenêtre contextuelle complète Le widget Effets de survol d'image pour les vaisseaux Elementor avec 30 animations de survol (8 dans le plugin gratuit et 22 autres avec Pro) et vous les configurez sans écrire une ligne de CSS. Il correspond aux endroits où une image doit porter un titre, une légende et une action : portefeuilles, grilles d'équipe, cartes de service, vitrines de produits.
Choisissez un effet, choisissez ce que fait le clic et stylisez chaque couche pour qu'elle corresponde à votre design Ce que vous vous retrouvez avec une carte image sur laquelle les gens s'arrêtent au lieu de défiler. La vidéo ci-dessous parcourt tout, montre chaque animation et la configuration prend quelques minutes.
Quels sont les effets de survol d’image ?
Un effet de survol d'image est une animation qui se déclenche lorsque quelqu'un déplace la souris sur une image. Au lieu de rester à plat, l'image réagit. Il peut zoomer, flouer, changer de couleur ou glisser un panneau de texte dans la vue. Le type le plus courant est une superposition d'images, où un titre et une description apparaissent sous forme de texte sur l'image. Vous les verrez également appelés effets de retournement d'image ou des effets de survol de photos, et ils font tous la même chose : prenez une image simple et faites-la lire comme “il y en a plus ici, cliquez sur moi.”
Vous pouvez construire tout cela à la main avec CSS personnalisé Cela signifie écrire les transitions, les amener à se comporter sur mobile, et revenir dans le code à chaque fois que le design change Le widget Master Addons le gère visuellement à l'intérieur d'Elementor, donc vous obtenez effets de survol d'image simples sans ouvrir un éditeur de code Si vous souhaitez voir le reste de la boîte à outils, parcourez le Widgets et extensions Master Addons ou le Fonctionnalités d'animation des éléments.
30 animations en vol stationnaire, dont 8 gratuites
Les premières impressions se produisent en vol stationnaire Vous obtenez une bibliothèque d'animations CSS qui apportent votre titre et votre description en douceur, de sorte que le texte arrive au lieu de simplement popping sur l'écran Appliquer n'importe quel effet en un clic, puis les parcourir en vélo dans l'éditeur jusqu'à ce que l'on convienne à l'image J'essaie habituellement trois ou quatre avant de m'installer, puisqu'un effet qui a fière allure sur un large paysage photographié peut se sentir sur un portrait serré.
- Fade et zoom : l'image s'estompe ou s'échelonne tandis que le texte s'efface.
- Glisser (haut, bas, gauche, droite) : un panneau de légende glisse depuis n'importe quel bord.
- Pousser et révéler : l'image se déplace pour faire place au titre et à la description.
- Flotter et briller : un petit lift et un balayage de lumière sur l'image.
- Huit effets sont gratuits : Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey et Oscar Pro en ajoute 22 de plus, de Marley à Duke.
- Fonctionne sur CSS : le mouvement reste fluide car il ne s'appuie pas sur des scripts lourds.
- Rapide à tester : échangez les effets dans l'éditeur et voyez immédiatement le changement.
Exemples d'effets de survol d'image
Déplacez le pointeur sur chaque carte ou appuyez dessus sur un téléphone pour voir l'effet. Ces huit sont les effets qui fonctionnent sans pro, et chaque carte est un widget d'effets de survol d'image en direct.
Ella et Sam
Somerset · juin
lis
Grèce
11 jours
sadie
rez-de-chaussée
cardio et machines
oxygé
fantôme
12 400 km
bubba
maison de la falaise
4 lits · EPC B
Roméo
Mur de galerie
Bristol · 2025
layla
Démarreurs Neuf plats
miel
Vêtements d'extérieur
87 pièces
Oscar
Les 30 effets de survol d'images
La liste déroulante Effet de survol répertorie 30 effets par nom. Chacun anime le titre et la description sur l'image, et ils diffèrent dans la façon dont la superposition, le texte et l'image se déplacent.
| Effet | a besoin de pro | Effet | a besoin de pro |
|---|---|---|---|
| lis | Non | Julia | Oui |
| sadie | Non | goliath | Oui |
| oxygé | Non | Héra | Oui |
| bubba | Non | Winston | Oui |
| Roméo | Non | selena | Oui |
| layla | Non | palebot | Oui |
| miel | Non | Phoebe | Oui |
| Oscar | Non | Apollon | Oui |
| marley | Oui | kira | Oui |
| rubis | Oui | éventrer | Oui |
| militantisme | Oui | Moïse | Oui |
| habileté | Oui | jazz | Oui |
| sarah | Oui | ming | Oui |
| zoe | Oui | lexi | Oui |
| chico | Oui | duc | Oui |
Liens intelligents et contenu contextuel sur Cliquez
Vous décidez ce qui se passe lorsque quelqu'un clique sur la carte Pointez-la sur n'importe quelle URL avec un lien standard, ou, avec Pro, basculez l'action sur Popup et gardez les gens sur la page La popup ne se limite pas non plus au texte : définissez Type de contenu sur Section enregistrée et il intègre n'importe quel modèle Elementor que vous avez déjà construit. Cela transforme une carte d'image en une porte vers une biographie complète, une fiche technique de produit ou un formulaire de contact, et le visiteur ne quitte jamais la page.
- Actions en deux clics : envoyez du trafic avec un lien ou gardez les gens sur place avec une fenêtre contextuelle (Pro).
- De vrais modèles dans la popup (Pro) : afficher une image, un texte ou une mise en page complète de votre bibliothèque.
- Tease, puis dis: l'image est le crochet et le popup porte le détail.
Texte sur l'image : titre, description et style de superposition
Vous contrôlez la façon dont la carte regarde dans les détails Téléchargez votre image et définissez son opacité et son filtre séparément pour les états normal et de vol stationnaire Ajoutez un en-tête (sélectionnez la bonne balise HTML pour qu'elle aide à la structure de votre page) et une description, puis stylisez chaque pièce de manière autonome avec ses propres couleurs, type, ombres et espacement.
- Titre et description séparés : stylisez chacun pour que la hiérarchie se lise clairement.
- Filtres d'image : le tour en niveaux de gris à couleur en vol stationnaire semble toujours bon et constitue ici un changement unique.
- Cadre de carte: arrière-plan, bordures et ombre de boîte, ainsi que coins arrondis et rembourrage avec Pro, il se trouve donc directement dans votre disposition.
Options de survol d'Elementor vs Le widget d'effets de survol d'image
Le propre widget d'images d'Elementor a des paramètres de survol dans l'onglet Style : opacité, filtres CSS et une animation de survol comme Grow ou Pulse. Ils changent l'image elle-même. Ils ne peuvent pas mettre du texte sur l'image, ce qui est l'écart que ce widget comble.
| Widget d'images Elementor | Widget Effets de survol d'image | |
|---|---|---|
| Opacité en survol | Oui | Oui |
| Filtres CSS en survol | Oui | Oui |
| Animation de survol | Préréglages qui déplacent l'image entière | 30 effets qui animent la superposition, le titre et la description |
| Texte sur l'image | non . La légende se trouve sous l'image. | Titre et description sur l'image |
| Texte qui apparaît au survol | Non | Oui |
| Cliquez sur Action | Lien ou lightbox | Lien ou une fenêtre contextuelle avec Pro |
| Passer à une deuxième image sur Hover | Non | non .Utiliser Image avancée Pour ça. |
Effets de survol d'image en un coup d'œil
Les principaux faits sur le widget dans une seule table.
| Caractéristique | Effets de survol d'image |
|---|---|
| Effets de survol | 30. 22 d'entre eux ont besoin de pro. |
| Texte sur l'image | Titre et description, avec une balise HTML de H1 à H6 pour le titre |
| Cliquez sur Action | Aucun, un lien ou un popup (Pro) |
| Contenu contextuel (Pro) | Texte, image ou section enregistrée, widget ou page |
| Paramètres d'image | Opacité et filtres, définis séparément pour Normal et Hover |
| Deuxième image en survol | Non |
| Écrans tactiles | Le premier clic affiche le texte. Le deuxième clic suit le lien. |
| Besoins | Élémenteur et maître Addons |
Comment ajouter des effets de survol d'image dans Elementor ?
Vous pouvez avoir une carte de vol stationnaire en moins de deux minutes Pas de CSS, pas de codes courts.
- Installez et activez Master Addons, puis modifiez n'importe quelle page avec Elementor.
- Recherchez dans le panneau du widget Effets de survol d'image et faites-le glisser sur votre disposition.
- Téléchargez votre image et ajoutez un titre et une description.
- Ouvrez le dropdown Hover Effect et choisissez une animation Huit sont gratuits et 22 autres sont livrés avec Pro.
- Définissez l'action de clic sur un lien ou sur une fenêtre contextuelle avec un modèle enregistré si vous avez Pro.
- Stylez le titre, la description et le conteneur, puis publiez.
Une chose qui vaut la peine d'être faite avant de publier : prévisualisez la carte sur un téléphone Le survol n'existe pas au toucher, alors vérifiez que le comportement du robinet a du sens (plus d'informations à ce sujet dans la FAQ).Pour chaque paramètre présenté dans l'ordre, suivez le Documentation des effets de survol d'image.
Où utiliser les effets de survol sur les images ?
- Grilles d'équipe : nom et rôle en vol stationnaire, puis une biographie complète dans une fenêtre contextuelle en clic. Voici comment construire une section des membres de l'équipe.
- Portefeuilles et galeries : un titre de projet et un lien de” d'étude de cas “View sur chaque photo.
- Cartes de service : une brève description et un lien vers la page de service.
- Présentations de produits : taquinez l'image du produit, puis ouvrez les spécifications dans une fenêtre contextuelle.
- Carreaux de blog et de catégorie : une légende de survol sur la navigation basée sur l'image.
Pour plus de façons de rassembler du texte et des images, lisez 25 Techniques de texte sur image des éléments. Les widgets d'image associés incluent le Carrousel d'images, le Galerie d'images filtrables, le Point d'accès de l'image widget et le Image avancée Widget.
Questions fréquemment posées pour les effets de survol d'image
Ces effets de survol fonctionneront-ils sur les appareils mobiles ?
Ils sont construits pour le bureau, où il y a une souris à survoler Sur un écran tactile l'effet se déclenche généralement sur le premier robinet pour afficher le contenu, et le deuxième robinet suit le lien ou ouvre la fenêtre contextuelle Prévoyez donc deux robinets sur mobile, et assurez-vous que le texte reste lisible une fois qu'il s'affiche.
Comment puis-je créer des effets de survol d'image simples sans écrire CSS ?
Déposez le widget Effets de survol d'image sur votre page, téléchargez une image, ajoutez un titre et une description et choisissez une animation dans le dépôt C'est tout, pas de CSS. Le widget écrit le CSS pour vous dans les coulisses, donc même une carte de survol assez impliquée reste facile à assembler.
Puis-je ouvrir une biographie d'équipe ou les détails d'un produit dans une fenêtre contextuelle en un clic ?
Oui, avec Pro. Mettez le nom dans le Titre et le rôle dans la Description, définissez l'action de clic sur Popup, et choisissez Type de contenu : Section enregistrée Construisez la bio comme modèle dans Elementor et sélectionnez-la ici Cliquez sur la photo et cette mise en page complète s'ouvre dans la popup.
Les 30 effets de survol d'image sont-ils gratuits ?
N° Huit effets sont gratuits : Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey et Oscar Les 22 autres sont livrés avec Master Addons Pro, ainsi que du contenu popup, des coins arrondis et des commandes de remplissage. Les filtres de titre, de description, de lien et d'image fonctionnent tous dans la version gratuite.
Comment afficher du texte lorsque quelqu'un survole une image dans Elementor ?
Ajoutez le widget d'effets de survol d'images, téléchargez l'image, tapez un titre et une description et choisissez un effet de survol. Le texte reste caché jusqu'à ce que le pointeur soit sur l'image, puis s'anime. Le propre widget d'image d'Elementor n'a pas de paramètre pour le texte sur l'image.
De nombreuses cartes images animées vont-elles ralentir mon site ?
Les effets s'exécutent sur CSS, donc une poignée sur une page ne pose aucun problème Ce qui ralentit réellement les choses, c'est le poids de l'image, alors compressez d'abord vos images Une fois que vous avez dépassé une vingtaine de cartes sur une page, activez le chargement paresseux et la première peinture reste rapide.
Puis-je utiliser différents effets de survol sur différentes images ?
Les paramètres couvrent une carte à la fois Pour mélanger les effets, ajoutez un widget distinct Effets de survol d'image pour chaque image et configurez-les indépendamment C'est ainsi que vous obtenez une galerie où les cartes n'animent pas toutes de la même manière.
Quel est l'avantage d'une « section enregistrée » dans la fenêtre contextuelle sur texte brut ?
Section enregistrée est une option Pro, et elle vous donne l'éditeur Elementor complet à l'intérieur de la popup Au lieu de texte brut, vous pouvez ajouter des images, des boutons, des colonnes, des vidéos ou des formulaires, de sorte que la popup ressemble au reste de votre site plutôt qu'à une boîte de texte nue.
Comment zoomer une image sur Hover dans Elementor ?
Pour un zoom simple, sélectionnez le widget Image d'Elementor, ouvrez l'onglet Style et définissez l'animation de survol pour la croissance. Dans le widget Effets de survol d'image, plusieurs effets mettent à l'échelle l'image pendant que le titre et la description entrent.
Puis-je changer l'image en survol ?
Pas avec ce widget. Il conserve une image et anime la superposition et le texte dessus. Pour passer à une deuxième image sur Hover, utilisez le Image avancée Widget et activez l'image de survol de l'écran.
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
![Modules principaux Extension de duplicateur de messages/pages pour le lien de ligne Elementor : MA Duplicator dans la liste des pages WordPress créant une ébauche de page de destination - [Dupliqué n° 128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicateur de messages/pages
