Principaux points à retenir
- Elementor n'a pas de paramètre unique pour modifier une image en vol stationnaire, donc l'échange se fait avec un fond de conteneur derrière l'image ou avec un widget qui accepte une deuxième image.
- La façon sans plugin de modifier une image en vol stationnaire dans Elementor consiste à définir la deuxième image comme arrière-plan du conteneur et à définir l'opacité de vol stationnaire du widget Image sur 0.
- Le widget Master Addons Advanced Image échange des images avec un seul commutateur, Affichage de l'image de survol, qui se trouve dans la section Image de survol de l'onglet Contenu.
- Le préréglage Hover Animation d'Elementor Grow zoome une image à 110 % en vol stationnaire, et l'image dépasse ses bords d'origine.
- Un zoom sur le survol qui reste à l'intérieur de son image nécessite une classe CSS sur le widget Image et trois règles CSS courtes qui mettent à l'échelle l'image dans un débordement caché.
Pour changer une image en vol stationnaire dans Elementor, vous mettez une deuxième image derrière ou à l'intérieur de la première et la révélez lorsque le pointeur arrive Elementor peut le faire sans plugin à travers un fond de conteneur, et un widget d'image en vol stationnaire le fait avec un commutateur Le zoom en vol stationnaire prend un préréglage pour un zoom de base, ou quelques lignes de CSS pour un zoom qui reste dans son cadre.
Les quatre méthodes ci-dessous ont été construites et testées sur Elementor 4.3.
Table des matières
Quelle méthode utiliser
Deux de ces méthodes échangent l'image et deux la zooment Au sein de chaque paire, l'une utilise uniquement Elementor et l'autre est plus rapide ou plus soignée.
| But | Méthode | Besoins | code |
|---|---|---|---|
| Passer à une deuxième image | Fond du conteneur plus opacité de vol stationnaire | Élémenteur | Aucun |
| Passer à une deuxième image | Widget d'image avancé | Additions maîtres | Aucun |
| Zoomez l'image | Animation en vol stationnaire : grandissez | Élémenteur | Aucun |
| Zoom à l'intérieur d'un cadre fixe | Classe CSS sur le widget Image | Élémenteur et un endroit pour ajouter CSS | Trois règles |
Modifiez une image sur le vol stationnaire avec un fond de conteneur
Cette méthode n'a besoin d'aucun plugin La deuxième image est l'arrière-plan d'un conteneur, et la première image se trouve au-dessus de celui-ci comme un widget Image normal En vol stationnaire, l'image du haut s'estompe et l'arrière-plan se montre à travers.
- Ajoutez un récipient et réglez son rembourrage à 0.
- Dans le conteneur modeler onglet, ouvrez Contexte(en anglais), choisissez Classique et téléchargez l'image qui doit apparaître sur le vol stationnaire Définissez la position sur Centre et la taille sur Couvrir.
- Glisser un imaginer widget dans le conteneur et choisissez l'image qui doit s'afficher en premier.
- Sélectionnez le widget Image, ouvrez modeler et passez au Survole onglet.
- Définir Opacité à 0 et Transition Durée à environ 0,4.
Utilisez deux images avec les mêmes proportions Le conteneur prend sa hauteur du widget Image, donc un arrière-plan avec une forme différente est recadré.
Modifiez une image en vol stationnaire avec un widget d'image en vol stationnaire
Un widget avec un champ d'image de survol effectue le même échange à partir d'un panneau Les étapes ci-dessous utilisent le Widget d'image avancé de Maître Addons.
- Recherchez dans le panneau du widget Image avancée et faites-le glisser sur la page.
- Dans le imaginer section, choisissez l'image principale.
- Ouvrir le Image de survol sectionnez et allumez Afficher l'image du survol.
- Choisissez la deuxième image dans le champ qui apparaît.
- Prévisualisez la page et passez la souris.
Le widget dispose également d'un ruban, d'un lien et d'une boîte à lumière, qui convient aux photos du produit : vue de face en premier, vue de dos en vol stationnaire, avec un nouveau ruban dans le coin.
Vous voulez du texte sur hover ? Effets de survol d'image anime un titre et une description sur une image, avec 30 effets au choix.
Zoomez une image en vol stationnaire avec le préréglage Grow
Le zoom le plus rapide est un préréglage Sélectionnez le widget Image, ouvrez modeler(en), passez au Survole onglet et ensemble Animation de survol à Grandir. L'image évolue à 110 pour cent lorsque le pointeur est dessus.
Grow fonctionne bien pour une seule image avec de l'espace autour d'elle Dans une grille serrée, il chevauche les images à côté, donc utilisez la méthode suivante là.
Zoomez une image en vol stationnaire à l'intérieur de son cadre
Pour un zoom qui reste dans la propre boîte de l'image, donnez au widget Image une classe CSS et ajoutez trois règles Le widget conserve sa taille, et l'image s'incline à l'intérieur de celle-ci.
- Sélectionnez le widget Image et ouvrez Avancé. Dans Classes CSS, tapez
hover-zoom. - Ajoutez le CSS ci-dessous à votre site.
.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); }
Où va le CSS dépend de votre configuration Elementor Pro a une boîte CSS personnalisée dans l'onglet Avancé Sans lui, utilisez Apparence, Personnaliser, CSS supplémentaire dans WordPress, ou le Extension CSS personnalisée dans les modules complémentaires principaux. Changez 1,08 à 1,15 pour un zoom plus fort.
Quatre choses qui tournent mal
La plupart des problèmes liés à ces effets proviennent de la taille des images et des tests effectués sur le mauvais appareil.
- Les deux images ont des proportions différentes L'échange saute alors ou cultive Export à la fois à la même largeur et à la même hauteur.
- L'image zoomée couvre le contenu proche Grow n'a pas de cadre Utilisez la méthode CSS lorsque les images sont rapprochées.
- Rien ne se passe sur un téléphone Les écrans tactiles n'ont pas de vol stationnaire Assurez-vous que la première image fonctionne seule, car les visiteurs du téléphone ne verront peut-être jamais la seconde.
- L'image de vol stationnaire est lourde Compresser les deux fichiers, car une grande deuxième image peut s'afficher sous forme de flash vierge sur le premier vol stationnaire.
Questions fréquemment posées
Comment puis-je changer une image en vol stationnaire dans Elementor sans plugin ?
Mettez l'image du survol sur un conteneur comme arrière-plan, puis placez un widget Image avec la première image à l'intérieur de ce conteneur Dans l'onglet Style du widget Image, ouvrez l'onglet Survol et réglez Opacité à 0 avec une Durée de Transition d'environ 0,4 seconde.
Comment zoomer une image sur Hover dans Elementor ?
Sélectionnez le widget Image, ouvrez Style, accédez à l'onglet Survoler et définissez Animation sur Survoler pour croître Pour un zoom qui reste à l'intérieur du cadre de l'image, ajoutez une classe CSS au widget et mettez l'image à l'échelle avec transformez à l'intérieur d'un wrapper dont le débordement est défini sur masqué.
Le widget Effets de survol d'image peut-il modifier l'image en vol stationnaire ?
No. Image Hover Effects conserve une image et anime un titre et une description par-dessus Pour passer à une deuxième image, utilisez le widget Advanced Image et activez Affichage Hover Image, ou utilisez la méthode de fond du conteneur.
Pourquoi mon image chevauche-t-elle d'autres contenus lorsqu'elle effectue un zoom ?
L'animation Grow met à l'échelle toute l'image au-delà de sa boîte Donnez une classe au widget Image, définissez le débordement sur caché dessus et mettez à l'échelle l'élément img à l'intérieur La boîte reste alors de la même taille et coupe le zoom.
Puis-je changer une image de produit en vol stationnaire dans WooCommerce avec ceci ?
Ces méthodes fonctionnent sur des images que vous placez vous-même dans Elementor Les grilles de produits générées par WooCommerce ou un widget de produits sont un cas différent et dépendent du thème ou du widget qui les imprime.
Réflexions finales
Pour modifier une image en vol stationnaire dans Elementor, utilisez un fond de conteneur avec un widget Image en fondu, ou un widget avec un champ image en vol stationnaire Pour zoomer, utilisez Grow pour un résultat rapide et la classe CSS lorsque l'image doit rester dans son cadre.
Le Widget d'image avancé gère le swap dans un panneau, et Effets de survol d'image couvre les superpositions de texte.
Lecture connexe
