Comment faire disparaître les images au survol dans WordPress (simple et facile)

Avez-vous déjà voulu ajouter une petite touche d'éclat aux images de votre site web ? Nous parlons d'une petite touche professionnelle qui rend votre site plus interactif sans être distrayant.

Chez WPBeginner, nous avons constaté qu'un simple effet de fondu au survol est une solution parfaite. C'est une animation subtile qui encourage doucement les visiteurs à interagir avec votre contenu visuel.

Cette petite modification peut faire une grande différence dans l'aspect général de votre site, et il est étonnamment facile de la mettre en place. Vous n'avez pas besoin d'être un expert en codage pour y parvenir.

Dans ce guide, nous vous montrerons exactement comment ajouter l'effet de fondu d'image au survol dans WordPress.

Pourquoi faire disparaître les images au survol dans WordPress ?

Les animations sont un moyen facile de rendre votre site web plus intéressant et peuvent même attirer l'attention du visiteur sur le contenu le plus important de votre page, tel que le logo de votre site web ou un appel à l'action.

Il existe de nombreuses façons d'utiliser des animations CSS dans WordPress, mais l'ajout d'un effet de survol aux images est particulièrement efficace. L'animation de fondu signifie que vos images apparaîtront ou disparaîtront lentement lorsque les visiteurs passeront leur souris dessus.

Cela encourage les gens à interagir avec vos images et peut même ajouter un élément narratif à la page. Par exemple, différentes images peuvent apparaître et disparaître progressivement lorsque le visiteur se déplace sur la page.

Contrairement à d'autres animations, l'effet de fondu d'image au survol de la souris est subtil, de sorte qu'il n'aura pas d'impact négatif sur l'expérience de lecture du visiteur ni sur l'optimisation des images que vous avez effectuée.

Cela dit, nous allons vous montrer comment ajouter un fondu à vos images au survol de la souris dans WordPress. Utilisez simplement les liens rapides ci-dessous pour accéder directement à la méthode que vous souhaitez utiliser :

• Méthode 1 : Ajouter un fondu d'image au survol à toutes les images WordPress
• Méthode 2 : Ajouter des animations de fondu d'image à des pages individuelles
• Méthode 3 : Ajouter des animations de fondu d'image aux images mises en avant
• Foire aux questions (FAQ)
• Ressources supplémentaires pour les effets et la gestion des images

Méthode 1 : Ajouter un fondu d'image au survol à toutes les images WordPress

Le moyen le plus simple d'ajouter un effet de fondu à toutes vos images est d'utiliser le plugin gratuit WPCode. C'est le plugin d'extraits de code le plus puissant et le plus convivial pour WordPress, et il vous permet d'ajouter du code personnalisé sans avoir à modifier les fichiers de votre thème.

C'est beaucoup plus sûr car le plugin aide à prévenir les erreurs qui peuvent causer des erreurs WordPress courantes. Pour plus de détails sur toutes ses fonctionnalités, vous pouvez lire notre avis complet sur WPCode.

Astuce d'expert : Chez WPBeginner, nous utilisons WPCode pour gérer tous les extraits de code personnalisés sur notre portefeuille de sites Web. C'est un moyen fiable pour nous d'ajouter des fonctionnalités et d'apporter des modifications en toute sécurité sans jamais modifier directement le fichier functions.php d'un thème.

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

Après l'activation, rendez-vous sur Extraits de code » Ajouter un extrait.

Ici, vous verrez tous les extraits WPCode prêts à l'emploi que vous pouvez ajouter à votre site. Ceux-ci incluent un extrait qui vous permet de désactiver complètement les commentaires, de télécharger des types de fichiers que WordPress ne prend pas normalement en charge, de désactiver les pages de pièces jointes, et bien plus encore.

Survolez simplement votre souris sur « Ajouter votre code personnalisé », puis cliquez sur « + Ajouter un extrait de code » lorsqu'il apparaît.

Pour ajouter du CSS personnalisé à WordPress, vous devez sélectionner « Extrait CSS » comme type de code dans la liste des options qui apparaissent à l'écran.

Ensuite, sur la page suivante, tapez un titre pour l'extrait de code personnalisé.

Cela peut être n'importe quoi qui vous aide à identifier l'extrait dans le tableau de bord WordPress.

Dans l'éditeur de code, ajoutez l'extrait de code suivant :

img:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

Cet extrait de code fera disparaître chaque image pendant 2 secondes lorsque l'utilisateur passera sa souris dessus. Pour que l'image disparaisse plus lentement, remplacez simplement « 2s ease » par un nombre plus élevé. Si vous voulez que l'image disparaisse plus rapidement, utilisez « 1s ease » ou moins.

Vous pouvez également augmenter ou diminuer l'« opacité » en modifiant la ligne opacity:0.6.

Si vous modifiez l'un de ces nombres, assurez-vous de les modifier pour toutes les propriétés (webkit, moz, ms et o) afin que l'effet de fondu soit le même sur tous les navigateurs.

Lorsque vous êtes satisfait de l'extrait, faites défiler jusqu'à la section « Insertion ». WPCode peut ajouter votre code à différents emplacements, tels qu'après chaque publication, uniquement sur le frontend, ou uniquement sur l'administration.

Pour ajouter un effet de fondu à toutes vos images, cliquez sur « Insertion automatique » si ce n'est pas déjà sélectionné. Ensuite, ouvrez le menu déroulant « Emplacement » et choisissez « En-tête de tout le site ».

Après cela, vous êtes prêt à faire défiler jusqu'en haut de l'écran et à cliquer sur le bouton « Inactif » pour qu'il devienne « Actif ».

Enfin, cliquez sur « Enregistrer l'extrait » pour rendre l'extrait CSS actif.

Maintenant, si vous passez la souris sur n'importe quelle image de votre site WordPress, vous verrez l'effet de fondu en action.

Méthode 2 : Ajouter des animations de fondu d'image à des pages individuelles

L'utilisation d'un effet de fondu pour chaque image peut devenir distrayante, surtout si vous avez une galerie photo sur votre site, un magasin de photos d'archives, ou tout autre site qui contient beaucoup d'images.

Dans cette optique, vous pourriez vouloir utiliser des effets de fondu sur une page ou une publication spécifique uniquement.

La bonne nouvelle est que WPCode vous permet de créer des shortcodes personnalisés. Vous pouvez placer ce shortcode sur n'importe quelle page, et WordPress affichera les effets de fondu sur cette page uniquement.

Pour ce faire, créez simplement un extrait de code personnalisé et ajoutez le code d'animation de fondu en suivant le même processus décrit ci-dessus. Ensuite, cliquez sur le bouton « Enregistrer l'extrait ».

Après cela, faites défiler jusqu'à la section « Insertion », mais cette fois, sélectionnez « Shortcode ».

Cela crée un shortcode que vous pouvez ajouter à n'importe quelle page, publication ou zone prête pour les widgets.

Après cela, allez-y et rendez l'extrait actif en suivant le même processus décrit ci-dessus.

Vous pouvez maintenant aller sur n'importe quelle page, publication ou zone prête pour les widgets et créer un nouveau bloc « Shortcode ». Ensuite, collez simplement le shortcode WPCode dans ce bloc.

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

Une fois cela fait, cliquez sur le bouton « Mettre à jour » ou « Publier » pour rendre le shortcode actif. Vous pouvez ensuite visiter cette page, publication ou zone prête pour les widgets pour voir l'effet de fondu au survol de la souris.

Méthode 3 : Ajouter des animations de fondu aux images mises en avant

Une autre option consiste à ajouter des animations de fondu à vos images mises en avant ou miniatures d'articles. Ce sont les images principales de l'article.

En faisant apparaître les images mises en avant au survol, vous pouvez rendre votre site plus attrayant et engageant sans animer chaque image de votre blog WordPress ou site Web.

Pour ajouter une animation de fondu à vos miniatures d'articles, créez simplement un nouvel extrait de code personnalisé en suivant le même processus décrit ci-dessus.

Cependant, cette fois, ajoutez le code suivant à l'éditeur :

img.wp-post-image:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

Après cela, faites défiler jusqu'à la boîte « Insertion » et sélectionnez « Insertion automatique ».

Ensuite, ouvrez le menu déroulant « Emplacement » et choisissez « En-tête du site ».

Après cela, vous pouvez aller de l'avant et rendre l'extrait de code actif en utilisant le même processus décrit ci-dessus.

Maintenant, vous pouvez survoler n'importe quelle image mise en avant avec la souris pour voir l'animation de fondu en action.

Si vous souhaitez ajouter encore plus d'effets de survol d'image, consultez notre guide sur comment ajouter des effets de survol d'image dans WordPress.

Foire aux questions (FAQ)

Voici les réponses à certaines des questions les plus fréquentes que nous recevons concernant l'ajout d'effets de survol d'image dans WordPress.

L'ajout d'un effet de fondu ralentira-t-il mon site web ?

Non, cet effet de fondu basé sur CSS ne devrait pas ralentir votre site web de manière notable. Le code utilise des transitions CSS simples, qui sont très légères et optimisées par les navigateurs web modernes.

Cette méthode est beaucoup plus efficace que l'utilisation de JavaScript ou de grandes bibliothèques d'animation pour un effet aussi simple.

Comment appliquer l'effet de fondu à une seule image spécifique ?

Pour cibler une seule image, vous pouvez lui attribuer une classe CSS personnalisée. Tout d'abord, sélectionnez le bloc d'image dans l'éditeur et trouvez le panneau « Avancé » dans les paramètres du bloc sur la droite.

Dans le champ « Classes CSS supplémentaires », ajoutez un nom unique comme custom-fade-image. Ensuite, modifiez votre extrait WPCode pour cibler spécifiquement cette classe, comme ceci :
img.custom-fade-image:hover { ... }.

L'effet de fondu de l'image au survol fonctionne-t-il sur les appareils mobiles ?

L'action « survol » ou « hover » est spécifique aux utilisateurs de bureau disposant d'un curseur de souris. Cet effet ne se déclenchera pas sur les appareils tactiles comme les smartphones ou les tablettes car il n'y a pas de curseur pour survoler les images.

Cependant, le code ne causera aucun problème sur mobile. Vos images s'afficheront simplement normalement sans l'animation de fondu.

Puis-je utiliser d'autres effets d'animation que le fondu ?

Oui, absolument. Le fondu n'est qu'une des nombreuses possibilités que vous pouvez réaliser avec CSS.

Vous pouvez créer des effets comme le zoom, le glissement, le niveaux de gris, ou appliquer des superpositions. Pour plus d'idées et d'exemples de code, consultez notre guide détaillé sur comment ajouter des effets de survol d'image dans WordPress.

Ressources supplémentaires pour les effets et la gestion des images

Un simple fondu est un excellent début, mais il existe de nombreuses autres façons de rendre vos images plus attrayantes. Si vous souhaitez explorer des options plus avancées, voici quelques-uns de nos autres guides sur les effets et la gestion des images :

• Comment ajouter des filtres photo façon Instagram dans WordPress (étape par étape)
• Comment afficher des photos avant/après dans WordPress (avec effet de glissement)
• Comment ajouter la fonction « Pas de clic droit » sur les images WordPress
• Comment créer des images interactives dans WordPress
• Comment ajouter facilement des images interactives à 360 degrés dans WordPress

Nous espérons que cet article vous a aidé à apprendre comment estomper les images au survol dans WordPress. Vous voudrez peut-être aussi consulter notre guide sur comment organiser les fichiers WordPress dans les dossiers de la médiathèque et nos meilleurs choix d'experts des meilleurs plugins et outils d'images mises en avant pour WordPress.

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.