Comment ajouter des effets de survol d'image dans WordPress (étape par étape)

Nous savons combien d'efforts sont nécessaires pour choisir les images parfaites pour votre site Web. Mais parfois, même les meilleures photos peuvent sembler un peu statiques, ne parvenant pas à capter toute l'attention d'un visiteur.

L'ajout d'une simple animation au survol peut être le petit détail qui rendra votre site plus professionnel et attrayant. Beaucoup pensent que cela nécessite un code personnalisé, mais nous avons trouvé plusieurs moyens faciles de le faire sur nos propres projets sans aucun codage.

Dans cet article, nous vous présenterons cinq méthodes simples, étape par étape, pour ajouter de magnifiques effets de survol d'image dans WordPress. Nous couvrirons tout, des simples fondus aux boîtes à bascule interactives.

Pourquoi utiliser des effets de survol d'image dans WordPress ?

Les effets de survol d'image vous permettent d'ajouter de courtes animations à vos images, telles que des zooms, des fondus, des pop-ups, et plus encore. Cela rendra vos images plus intéressantes et attrayantes, même si une page contient de nombreuses images.

Vous pouvez également utiliser des effets de survol pour attirer l'attention du visiteur sur le contenu le plus important. Par exemple, vous pourriez utiliser des animations CSS pour mettre en évidence le logo de votre site Web ou un appel à l'action.

Plongeons dans 5 façons conviviales pour les débutants d'ajouter différents effets de survol d'image à votre site WordPress. Utilisez simplement les liens rapides ci-dessous pour accéder directement à l'effet que vous souhaitez utiliser :

• Option 1 : Ajouter des effets de boîte à bascule dans WordPress (rapide et facile)
• Option 2 : Ajouter des effets de zoom et de grossissement d'image (idéal pour les boutiques en ligne)
• Option 3 : Faire disparaître les images au survol dans WordPress (idéal pour les performances)
• Option 4 : Ajouter plusieurs effets de survol d'image à WordPress (le plus personnalisable)
• Option 5 : Ajouter des effets de survol d'image avec un éditeur CSS visuel
• Foire aux questions sur les effets de survol d'image
• Apprenez d'autres façons d'utiliser et de gérer les images dans WordPress

Option 1 : Ajouter des effets de boîte à bascule dans WordPress (rapide et facile)

La façon la plus simple d'ajouter des effets de survol à WordPress est d'utiliser des flipboxes. Une flipbox est simplement une boîte qui se retourne lorsque vous la survolez avec la souris. Cela vous permet d'afficher une image, un texte ou un appel à l'action différent au survol.

Si vous êtes un photographe, vous pourriez afficher une photo d'un côté de la flipbox et des informations sur le modèle de l'appareil photo ou la résolution de l'autre côté.

Si vous vendez de l'art numérique ou des graphiques en ligne, vous pourriez même ajouter un bouton sur lequel les visiteurs peuvent cliquer pour acheter cette photo.

La façon la plus simple de créer des flipboxes est d'utiliser Flipbox – Awesomes Flip Boxes Image Overlay. Ce plugin gratuit propose plusieurs styles de flipboxes différents, combinant images, textes et boutons d'appel à l'action.

La première chose à faire est d'installer et d'activer le plugin Flipbox. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Une fois le plugin installé et activé, vous pouvez créer votre première flipbox en allant dans Flip Box » Créer nouveau.

Cela affiche tous les différents modèles que vous pouvez utiliser.

Pour choisir un design, cliquez sur son bouton « Créer un style ».

Dans la fenêtre contextuelle qui apparaît, tapez un nom pour la conception de la boîte à bascule. Ceci est juste pour votre référence, vous pouvez donc utiliser ce que vous voulez.

Vous pouvez également choisir la mise en page que vous souhaitez utiliser en cliquant sur 1ère, 2ème ou 3ème.

Après avoir choisi un style de boîte à bascule, vous pouvez modifier les polices, le remplissage et les marges.

Vous pouvez ensuite ajouter du texte, des images et des icônes des deux côtés de la boîte à bascule.

Lorsque vous êtes satisfait de l'apparence de la boîte à bascule, vous voudrez peut-être en ajouter d'autres en cliquant sur le '+' dans la section 'Ajouter de nouvelles boîtes à bascule'.

Cela vous permet de créer plusieurs flipboxes avec le même style, puis de les organiser en colonnes et en lignes.

Par exemple, vous pourriez créer une flipbox pour chaque plan tarifaire.

Les acheteurs peuvent alors survoler un plan pour voir le coût.

Lorsque vous êtes satisfait des animations de survol, vous pouvez l'ajouter à n'importe quelle page, publication ou zone prête pour les widgets à l'aide d'un shortcode que le plugin fournit automatiquement.

Pour des instructions étape par étape, consultez notre guide sur comment créer des superpositions et des survolages de flipbox.

Option 2 : Ajouter des effets de zoom et de grossissement d'image (idéal pour les boutiques en ligne)

Les effets de zoom permettent aux utilisateurs de voir des détails qui ne seraient normalement pas visibles. Si vous avez une boutique e-commerce ou une place de marché en ligne, cela permet aux acheteurs d'explorer un produit plus en détail, ce qui peut vous rapporter plus de ventes.

Les effets de zoom peuvent également ajouter plus d'interaction et d'engagement à votre site.

Par exemple, vous pourriez créer des puzzles et des jeux simples qui mettent les visiteurs au défi de repérer de petits détails dans vos images. Cela peut les maintenir plus longtemps sur votre site, ce qui augmentera vos vues de page et diminuera le taux de rebond.

Le meilleur plugin WordPress pour ajouter des effets de zoom et de grossissement d'image est WP Image Zoom.

Ce plugin d'effets de survol vous permet de personnaliser l'apparence et le comportement de l'effet de zoom sur l'ensemble de votre site Web WordPress. Vous pouvez ensuite activer le zoom pour n'importe quelle image.

Nous utiliserons la version gratuite dans ce guide, mais si vous souhaitez plus d'options de personnalisation, vous pourriez vouloir consulter WP Image Zoom Pro. Consultez notre revue de WP Image Zoom pour plus de détails.

Tout d'abord, vous devez installer et activer le plugin WP Image Zoom . Pour plus de détails, veuillez consulter notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, vous devez vous rendre sur la page WP Image Zoom » Réglages du zoom depuis la barre latérale d'administration de WordPress. Si elle n'est pas déjà sélectionnée, cliquez sur « Réglages du zoom ».

Pour commencer, vous pouvez choisir entre quelques formes de lentilles différentes.

Vous pouvez également sélectionner un type de curseur, définir un effet d'animation, activer le zoom au survol de la souris ou au clic de la souris, et définir un niveau de zoom.

Lorsque vous êtes satisfait de la configuration du zoom, vous pouvez ajouter l'effet à n'importe quelle image. Dans l'éditeur de blocs Gutenberg, cliquez pour sélectionner l'image à laquelle vous souhaitez ajouter un effet de zoom. Ou, téléchargez une image d'abord sur WordPress.

Dans le menu de droite, sélectionnez le bouton « avec Zoom ».

Si vous utilisez WooCommerce, vous pouvez activer le zoom sur toutes vos images de produits dans les paramètres du plugin. C'est idéal si vous souhaitez activer le zoom sur l'ensemble de votre boutique en ligne sans avoir à mettre à jour chaque produit individuellement.

Dans l'onglet « Paramètres généraux », cochez la case « Activer le zoom... », et les clients pourront agrandir n'importe quelle image de produit.

Pour plus de détails, consultez notre guide sur comment ajouter un zoom grossissant pour les images dans WordPress.

Option 3 : Faire disparaître les images au survol dans WordPress (idéal pour les performances)

Une autre option est une simple animation de fondu, où vos images apparaissent ou disparaissent lentement lorsqu'un visiteur les survole. C'est un excellent moyen de mettre en évidence les images pendant que l'utilisateur se déplace sur la page.

Vous pouvez utiliser cet effet pour guider le visiteur à travers votre contenu ou même ajouter un élément narratif à un article.

Contrairement à certaines animations complexes, l'effet de fondu est très subtil. Il n'aura pas d'impact négatif sur l'expérience de lecture ni n'interférera avec vos efforts d'optimisation d'images.

Cela en fait un choix parfait pour les pages qui contiennent de nombreuses photos haute résolution.

La façon la plus simple d'ajouter cet effet est d'utiliser le plugin gratuit WPCode. Il vous permet d'ajouter du CSS personnalisé sans avoir à modifier directement les fichiers de votre thème, ce qui est beaucoup plus sûr.

Chez WPBeginner, nous utilisons WPCode pour gérer tous les extraits de code personnalisés qui alimentent notre site. C'est un outil fiable que nous recommandons pour ajouter tout type de code personnalisé. Pour plus de détails, vous pouvez lire notre avis complet sur WPCode.

Pour les instructions complètes sur l'utilisation de WPCode pour cet effet, consultez notre guide sur comment faire disparaître les images au survol dans WordPress.

Option 4 : Ajouter plusieurs effets de survol d'image à WordPress (le plus personnalisable)

Vous pourriez vouloir utiliser plusieurs effets de survol d'image différents sur votre site Web. Par exemple, si vous avez de nombreuses galeries d'images, vous pourriez vouloir animer ces photos de manière différente et intéressante.

La meilleure façon d'ajouter plusieurs effets de survol à WordPress est d'utiliser Image Hover Effects Ultimate. Ce plugin gratuit prend en charge une large gamme d'effets que vous pouvez personnaliser selon vos besoins.

La première chose à faire est d'installer et d'activer le plugin Image Hover Effects Ultimate. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, sélectionnez « Image Hover » dans le tableau de bord WordPress. Vous verrez alors tous les différents types d'effets de survol que vous pouvez utiliser.

Pour ce guide, nous sélectionnerons « Effets de légende », qui ajoute du texte animé sur une image.

Vous pouvez créer n'importe quel type d'effet de survol que vous souhaitez, bien que les options que vous voyez puissent varier.

Après avoir cliqué sur « Effets de légende », vous verrez tous les différents styles que vous pouvez utiliser.

Survolez simplement un style pour voir un aperçu de l'apparence de l'animation.

Lorsque vous trouvez un style qui vous plaît, cliquez sur son bouton « Créer le style ».

Cela ouvre une fenêtre contextuelle où vous pouvez choisir la mise en page exacte que vous souhaitez utiliser. Allez-y et cliquez sur 1er, 2ème ou 3ème.

Une fois cela fait, tapez un titre dans le champ « Nom ». Ceci est juste pour votre référence, vous pouvez donc utiliser tout ce qui vous aide à identifier l'image animée dans votre tableau de bord WordPress.

Après cela, cliquez sur « Enregistrer ».

Cela vous amène à un écran où vous pouvez personnaliser l'effet de survol. Cela inclut la modification de la largeur et de la hauteur du contenu, l'augmentation du remplissage et l'ajout d'une ombre portée.

Au fur et à mesure que vous apportez des modifications, l'aperçu en direct se mettra à jour automatiquement, vous pourrez donc essayer différents paramètres pour voir ce qui rend le mieux.

Pour certains effets de survol, vous pouvez modifier la direction de l'effet.

Par exemple, dans l'image suivante, nous changeons la direction de l'effet « persiennes » pour qu'il aille vers la droite.

Vous pouvez également rendre l'effet plus rapide ou plus lent en faisant glisser le curseur « Durée des effets ». Si vous utilisez un nombre plus élevé, l'effet durera plus longtemps. Si vous diminuez le nombre, l'effet sera plus rapide et plus court.

Si vous avez un nombre spécifique en tête, vous pouvez le taper dans la boîte à côté du curseur « Durée des effets ».

Lorsque vous êtes satisfait de la configuration de l'effet, il est temps d'ajouter du contenu.

Pour ce faire, survolez la section « Aperçu » et cliquez sur le bouton « Modifier » lorsqu'il apparaît.

Cela ouvre une fenêtre contextuelle où vous pouvez taper un titre et une courte description.

C'est le contenu qui apparaîtra lorsqu'un visiteur survolera l'image.

Après cela, vous pouvez remplacer l'image par défaut par votre propre photo.

Survolez simplement la photo de remplacement, puis cliquez sur « Choisir une image » lorsqu'elle apparaît.

Vous pouvez maintenant choisir une image dans la bibliothèque multimédia WordPress ou télécharger un nouveau fichier depuis votre ordinateur.

Parfois, vous pouvez utiliser des effets de survol pour diriger les utilisateurs vers d'autres sections de votre blog WordPress ou de votre site web. Par exemple, si vous gérez une boutique en ligne, vous pourriez ajouter un lien vers le produit présenté dans l'image.

Vous pouvez le faire en ajoutant un bouton CTA, qui apparaîtra sous la courte description.

Pour commencer, ajoutez l'URL dans le champ « Lien ».

Ensuite, ajoutez votre message en tapant dans le champ « Texte du bouton ».

Lorsque vous êtes satisfait des informations saisies, cliquez sur « Soumettre ».

Maintenant que vous avez ajouté du texte, il est conseillé de cliquer sur l'onglet « Typographie ».

Ici, vous pouvez changer la taille de la police, ajouter une ombre de texte, agrandir ou réduire les marges, et bien plus encore.

Si vous utilisez un bouton CTA, assurez-vous de cliquer pour développer la section « Paramètres du bouton ».

Ici, vous pouvez modifier l'apparence du bouton dans son état par défaut et « au survol », c'est-à-dire son apparence lorsque le visiteur passe la souris dessus. Vous pouvez également modifier l'alignement du bouton.

La plupart de ces paramètres sont simples, il vaut donc la peine de les examiner pour voir quels types d'effets vous pouvez créer.

Lorsque vous êtes satisfait de l'aperçu, cliquez sur « Enregistrer » pour sauvegarder vos modifications.

Voulez-vous créer une ligne ou une colonne d'images animées ?

Par exemple, vous pourriez utiliser des effets de survol d'image pour faire la publicité des meilleures caractéristiques de votre produit. Dans l'image suivante, le visiteur peut survoler chaque image pour en savoir plus sur une caractéristique différente.

Vous voulez créer une rangée entière ou une galerie de ces images animées ? Pas de problème. Pour en ajouter une autre, faites simplement défiler vers le haut jusqu'à la section « Ajouter un nouveau survol d'image ».

Ici, cliquez sur le bouton « + ».

Cela ouvre une fenêtre contextuelle où vous pouvez créer un nouvel effet de survol d'image, en suivant le même processus décrit ci-dessus.

Lorsque vous êtes satisfait de la configuration de l'effet, cliquez sur le bouton « Soumettre » pour enregistrer vos modifications.

Pour créer d'autres effets de survol, répétez simplement le même processus décrit ci-dessus.

Lorsque vous êtes satisfait de la configuration des effets, faites défiler jusqu'à la boîte « Shortcode ». Vous pouvez ajouter cet effet de survol à n'importe quelle page ou publication en copiant et collant ce code.

Pour plus d'informations sur la façon de placer le shortcode, veuillez consulter notre guide sur comment ajouter un shortcode dans WordPress.

Option 5 : Ajouter des effets de survol d'image avec un éditeur CSS visuel

Bon nombre des plugins ci-dessus vous permettent de créer des images animées avancées, telles que des boîtes à bascule, puis de les placer sur une page à l'aide d'un shortcode. Cependant, parfois, vous voudrez peut-être ajouter un effet de survol à une image qui se trouve déjà sur la page.

Dans ce cas, vous pouvez utiliser un plugin CSS personnalisé WordPress. Cela vous permet d'apporter des modifications visuelles à vos images sans coder, et vous n'avez pas non plus à créer séparément des effets de survol dans le tableau de bord WordPress.

Ici, nous vous recommandons d'utiliser CSS Hero. Ce plugin vous permet de modifier presque tous les styles CSS de votre site WordPress à l'aide d'un éditeur visuel. Il est également livré avec des effets de survol intégrés que vous pouvez appliquer aux images en un clic.

La première chose à faire est d'installer et d'activer le plugin CSS Hero. Pour plus de détails sur l'installation d'un plugin, consultez notre guide sur comment installer un plugin WordPress.

Une fois le plugin installé, vous devrez cliquer sur le bouton « Continuer vers l'activation du produit ».

Cela vous redirigera vers le site Web de CSS Hero, où vous pourrez vous connecter à votre compte et obtenir une clé de licence. Suivez simplement les instructions à l'écran, et vous serez redirigé vers votre site en quelques clics.

Après cela, ouvrez la page ou l'article qui contient l'image que vous souhaitez animer. Ensuite, cliquez sur « CSS Hero » dans la barre d'administration de WordPress.

Cela ouvrira cette page ou cet article dans l'éditeur CSS Hero.

Ici, cliquer sur n'importe quel élément de contenu ouvrira un panneau avec tous les paramètres que vous pouvez utiliser pour personnaliser cet élément. Cela étant dit, cliquez simplement pour sélectionner n'importe quelle image.

Dans le menu de gauche, sélectionnez l'onglet « Snippets ».

Ensuite, cliquez sur « Effets de survol ». Vous verrez maintenant tous les différents effets CSS.

Pour prévisualiser un effet, survolez simplement son bouton bleu dans le menu de gauche.

Lorsque vous trouvez un effet que vous souhaitez utiliser, cliquez simplement sur « Appliquer ».

Important : Par défaut, CSS Hero appliquera cet effet de survol à toutes les images de la page. C'est idéal pour créer un style uniforme, mais si vous ne souhaitez animer qu'une seule image spécifique, l'une des autres méthodes de plugin de ce guide pourrait être plus appropriée.

Pour rendre ce changement effectif, cliquez sur le bouton « Enregistrer et publier ».

Foire aux questions sur les effets de survol d'image

Ayant aidé des milliers d'utilisateurs de WordPress, nous avons entendu à peu près toutes les questions concernant l'ajout d'éléments interactifs à un site Web. Voici certaines des questions les plus fréquentes que nous recevons concernant les effets de survol d'images.

Les effets de survol d'images fonctionnent-ils sur les appareils mobiles ?

Les effets de survol sont conçus pour les curseurs de souris, ils ne fonctionnent donc pas sur les appareils tactiles comme les smartphones et les tablettes. Sur mobile, l'image affichera généralement son état par défaut sans aucune animation.

Certains plugins offrent des options de secours, comme le déclenchement d'une animation au premier toucher. Pour cette raison, nous vous recommandons toujours de vérifier vos pages sur un smartphone ou une tablette pour voir exactement comment vos images apparaîtront aux visiteurs mobiles.

Cela garantit une excellente expérience pour tout le monde, quel que soit l'appareil qu'ils utilisent ! 👍

L'ajout d'effets de survol d'images ralentira-t-il mon site Web ?

La plupart des effets de survol modernes sont créés à l'aide de CSS, qui est très léger et efficace. En utilisant un plugin de qualité, ces effets ne devraient pas avoir d'impact notable sur la vitesse ou les performances de votre site Web.

Puis-je ajouter des effets de survol d'images sans plugin ?

Oui, il est possible d'ajouter des effets de survol d'image en écrivant votre propre code CSS personnalisé. Cependant, cette méthode nécessite des connaissances techniques et implique la modification des fichiers de votre thème, ce qui peut être risqué pour les débutants.

L'utilisation d'un plugin est la méthode la plus sûre et la plus simple pour la plupart des utilisateurs, car elle gère tout le code pour vous.

Apprenez d'autres façons d'utiliser et de gérer les images dans WordPress

Les effets de survol d'image ne sont pas le seul moyen d'ajouter plus d'intérêt visuel à votre site Web. Voici d'autres tutoriels que vous pouvez lire sur l'utilisation des images dans WordPress :

• Comment créer des images interactives dans WordPress
• Comment agrandir les images au clic dans WordPress (3 méthodes faciles)
• Comment afficher des photos avant/après dans WordPress (avec effet de glissement)
• Comment ajouter une galerie dans WordPress avec un effetLightbox
• Comment ajouter des filtres photo façon Instagram dans WordPress (étape par étape)
• Comment utiliser l'IA pour générer des images dans WordPress
• Comment ajouter des GIF animés dans WordPress (la bonne méthode)

Nous espérons que cet article vous a aidé à apprendre comment ajouter des effets de survol d'image dans WordPress. Vous pourriez également vouloir consulter notre sélection d'experts des meilleurs plugins de slider WordPress et notre liste de sources d'images gratuites du domaine public.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.