Principaux points à retenir
- Le widget Master Addons Image Hover Effects pour Elementor dispose de 30 effets de survol d'image, chacun choisi par son nom dans une liste déroulante Hover Effect dans l'onglet Contenu.
- Huit effets de survol d'image fonctionnent sans Master Addons Pro : Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey et Oscar Les 22 autres effets ont besoin de Pro.
- La plupart des 30 effets de survol d'image montrent un titre et une description, six montrent également des icônes sociales, Honey utilise un sous-titre et Julia montre trois lignes de texte distinctes.
- Chaque effet de survol d'image dans le widget est construit avec CSS, et chaque widget contient une image, donc une grille de cartes de survol est constituée de plusieurs widgets.
- Sur les écrans tactiles, les effets de survol d'image apparaissent généralement sur la première pression, et une deuxième pression suit le lien.
Les effets de survol d'image sont des animations qui se jouent lorsque le pointeur se déplace sur une image, le plus souvent pour révéler un titre et une description Vous en trouverez ci-dessous 30, tous issus du Widget Effets de survol d'image pour Elementor, chacun capturé dans son état de vol stationnaire sur une page réelle Utilisez la liste pour choisir un effet en fonction de ce qu'il montre et de l'endroit où il correspond.
Les effets sont nommés par leur nom dans le widget, donc les noms ci-dessous sont ce que vous verrez dans la liste déroulante Les huit premiers travaux sur chaque plan et les autres ont besoin de Master Addons Pro.
Table des matières
Comment lire ces exemples
Chaque exemple montre la carte pendant que le pointeur est dessus Avant le survol, l'image est simple, ou montre seulement le titre, selon l'effet La ligne sous chaque image dit ce qui est à l'écran et suggère une utilisation.
Le texte, les couleurs et les polices sont à vous de changer. Ce qu'un effet corrige, c'est la disposition de la superposition et la manière dont elle arrive.
Les 8 effets qui fonctionnent sans Pro
Les huit premiers effets de la liste déroulante sont disponibles sur chaque plan Tous les huit ont un titre et une description, sauf Honey, qui montre le titre avec un sous-titre.
1. Lys
Le titre et la description se trouvent dans le coin inférieur gauche sur une image légèrement tamisée. Il convient aux vignettes du portfolio où la photo doit rester au centre.
2. Sadie
Le titre est centré et la description apparaît plus bas car une teinte recouvre l'image Il convient aux tuiles de destination et aux cartes de catégorie avec un slogan court.
3. Roxy
Un cadre fin est dessiné à l'intérieur de l'image avec le titre et la description centrés sur celle-ci. Il convient aux carreaux de produits ou de services qui nécessitent un look bien rangé et encadré.
4. Bubba
Un cadre est dessiné autour du centre et le titre et la description se trouvent à l'intérieur. Il convient aux listes où chaque carte porte un nom et une ligne de détail.
5. Roméo
Deux lignes fines traversent l'image, avec le titre au-dessus du centre et la description ci-dessous. Il convient aux cartes de propriété et de projet avec une photo forte.
6. Layla
Les lignes horizontales et verticales forment un cadre ouvert autour du titre et de la description Il convient aux grilles intérieures, architecturales et de galerie.
7. Chéri
Le titre et le Sous-titre partagent une ligne en bas, au-dessus d'une barre colorée. Cela convient aux catégories de menu et aux étiquettes courtes. Le miel est le seul effet qui utilise le champ Sous-titre.
8. Oscar
L'image s'assombrit et un cadre apparaît avec le titre et la description centrés Il convient aux catégories de magasins et à toute carte avec deux courtes lignes de texte.
Passez-les vous-même. Le Page de widget d'effets de survol de l'image a ces huit effets comme cartes vivantes.
Les effets 22 Pro
Les 22 effets restants nécessitent Master Addons Pro. Six d'entre eux ajoutent des icônes sociales et un, Julia, affiche trois lignes de texte.
9. Marley
Le titre se trouve en haut à droite, une ligne passe en dessous et la description apparaît en bas à droite. Cela convient aux mises en page éditoriales et aux cartes de style magazine.
10. Rubis
Le titre reste au-dessus d'une boîte bordée qui contient la description. Il convient aux tuiles de caractéristiques où la description est un appel à l'action.
11. Milo
La description se trouve en haut à droite à côté d'une ligne verticale, et le titre est en bas à droite Il convient aux cartes image avec une légende et un crédit.
12. Dexter
Le titre est en haut et un cadre épais en bas contient la description Il convient aux carreaux promotionnels audacieux.
13. Sarah
Le titre est en haut à gauche avec une ligne en dessous, et la description suit ci-dessous Il convient aux cartes de style blog et aux teasers d'études de cas.
14. Zoé
Une barre colorée s'élève du bas avec le titre et les icônes sociales, et la description se trouve au-dessus. Cela convient aux membres de l'équipe et aux cartes d'auteur.
15. Chico
L'image s'assombrit à l'intérieur d'un cadre, avec le titre et la description centrés Il convient aux galeries sombres et cinématographiques.
16. Julia
Le titre est en haut à gauche et jusqu'à trois lignes courtes apparaissent sous lui, chacune sur sa propre étiquette Il convient aux cartes qui ont besoin de quelques faits semblables à des balles Julia a son propre répéteur pour ces lignes.
17. Goliath
Un panneau sombre couvre la partie inférieure de l'image et contient le titre et la description. Il convient aux cartes avec des descriptions plus longues qui nécessitent un fond solide.
18. Héra
Un contour en losange apparaît au centre avec le titre et quatre icônes sociales. Il convient aux photos de profil et aux cartes de liens sociaux.
19. Winston
Le titre est en haut et une rangée d'icônes sociales apparaît en bas Il convient aux grilles d'équipe où chaque personne a des profils sociaux.
20. Séléna
L'image se rétrécit à l'intérieur d'un cadre tandis que le titre et la description se trouvent près du sommet. Cela convient aux lookbooks et à la photographie de produits.
21. Terry
L'image se déplace dans une fenêtre plus petite sur un fond sombre, avec le titre en bas à gauche et les icônes sociales Elle convient aux cartes de haut-parleur et de bâton.
22. Phoebe
Le titre est centré avec une rangée d'icônes sociales directement en dessous. Il convient aux cartes de profil simples.
23. Apollon
Le titre se trouve en haut à droite et la description en bas à droite à côté d'une courte ligne verticale. Cela convient aux tuiles de portefeuille minimales.
24. Kira
Le titre est en haut avec des icônes sociales dans un panneau lumineux en dessous, suivi de la description Il convient aux membres de l'équipe avec un rôle d'une ligne.
25. Steve
Le titre et la description apparaissent chacun sur leur propre barre blanche sur l'image Il convient aux étiquettes à contraste élevé sur les photos occupées.
26. Moïse
Le titre se trouve dans une boîte en haut à gauche et la description dans une deuxième boîte en bas à droite Il convient aux étiquettes en deux parties comme un nom et un prix.
27. Jazz
Le titre et la description sont centrés, et des lignes diagonales coupées dans les coins Il convient aux œuvres d'art événementielles et musicales.
28. Ming
Un cadre entoure le centre avec le titre au-dessus de la description. Il convient aux cartes formelles telles que les récompenses ou les certificats.
29. Lexi
Le titre est en haut à gauche, et la description se trouve en bas à droite à l'intérieur d'une ligne courbe Il convient aux carreaux de produits et de style de vie ludiques.
30. Duc
Le titre est en haut et la description se trouve dans une boîte en bas à gauche. Cela convient aux cartes avec une étiquette courte qui devrait se lire comme une balise.
Les 30 effets de survol d'image dans un seul tableau
Ce tableau répertorie chaque effet avec les couches de texte qu'il affiche et s'il a besoin de Pro.
| Effet | Spectacles en vol stationnaire | a besoin de pro |
|---|---|---|
| lis | Titre et description | Non |
| sadie | Titre et description | Non |
| oxygé | Titre et description | Non |
| bubba | Titre et description | Non |
| Roméo | Titre et description | Non |
| layla | Titre et description | Non |
| miel | Titre et sous-titre | Non |
| Oscar | Titre et description | Non |
| marley | Titre et description | Oui |
| rubis | Titre et description | Oui |
| militantisme | Titre et description | Oui |
| habileté | Titre et description | Oui |
| sarah | Titre et description | Oui |
| zoe | Titre, description et icônes sociales | Oui |
| chico | Titre et description | Oui |
| Julia | Titre et trois lignes | Oui |
| goliath | Titre et description | Oui |
| Héra | Titre et icônes sociales | Oui |
| Winston | Titre et icônes sociales | Oui |
| selena | Titre et description | Oui |
| palebot | Titre et icônes sociales | Oui |
| Phoebe | Titre et icônes sociales | Oui |
| Apollon | Titre et description | Oui |
| kira | Titre, description et icônes sociales | Oui |
| éventrer | Titre et description | Oui |
| Moïse | Titre et description | Oui |
| jazz | Titre et description | Oui |
| ming | Titre et description | Oui |
| lexi | Titre et description | Oui |
| duc | Titre et description | Oui |
Comment ajouter un de ces effets dans Elementor
L'ajout d'un effet nécessite un widget et une liste déroulante.
- Modifiez votre page avec Elementor et faites glisser le Effets de survol d'image widget dessus.
- Téléchargez l'image sous Effets et image.
- Choisissez l'effet par nom Effet de survol.
- Remplissez le Titre et description. Les effets avec les icônes affichent également une section Liens sociaux.
- Définir Liens ou Popup ? si un clic doit mener quelque part.
Pour une grille, placez un widget par colonne et utilisez le même effet sur la ligne Notre guide étape par étape pour ajout d'effets de survol d'image dans Elementor couvre également les options intégrées Pour les légendes qui restent sur l'image, voir Texte de l'élémenteur sur l'image.
Questions fréquemment posées
Que sont les effets de survol d'image ?
Les effets de survol d'image sont des animations qui s'exécutent lorsqu'un visiteur déplace le pointeur sur une image. L'image peut zoomer, obscurcir ou changer de couleur, et un titre ou une description glisse ou disparaît souvent dessus. Ils sont également appelés effets de retournement d'image ou superpositions d'images.
Quels effets de survol d'image fonctionnent sans Master Addons Pro ?
Huit des 30 : Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey et Oscar Ils sont les huit premières entrées dans le dropdown Hover Effect Les 22 restantes, de Marley à Duke, ont besoin de Master Addons Pro.
Puis-je utiliser un effet de survol différent sur chaque image ?
Oui. Chaque widget Effets de survol d'image contient une image et un effet, de sorte que chaque carte d'une grille peut avoir la sienne Pour une page bien rangée, conservez un effet par ligne ou par section.
Ces effets de survol d'image nécessitent-ils un CSS personnalisé ?
Non. Vous choisissez l'effet dans une liste déroulante et le widget fournit le CSS. Les couleurs, l'opacité et la typographie sont définies dans l'onglet Style. Si vous préférez écrire le CSS vous-même, quelques lignes sur le widget Image d'Elementor peuvent produire des effets simples tels que le zoom ou l'échelle de gris.
Quel effet de vol stationnaire est le meilleur pour une section d'équipe ?
Les effets avec des icônes sociales correspondent aux cartes d'équipe : Zoé, Héra, Winston, Terry, Phoebe et Kira Zoe et Kira montrent également une description, qui fonctionne comme le rôle de la personne Tous les six ont besoin de Master Addons Pro.
Réflexions finales
Ces 30 effets de survol d'image couvrent la plupart des mises en page dont vous aurez besoin : légendes de coin, cadres centrés, barres, panneaux et rangées d'icônes Choisissez par le texte que vous avez. Un titre court convient à Lily ou Oscar, une description plus longue convient à Goliath et des liens sociaux appellent Zoé ou Winston.
Le Page de widget d'effets de survol de l'image a des cartes en direct à essayer, et le page de tarification répertorie les plans qui incluent les 30.
Lecture connexe
