Comment appliquer un fondu aux images au passage de la souris dans WordPress (Simple & Facile)

Même si cela peut sembler anodin, l’une des choses que nous ajoutons parfois à nos sites WordPress est une simple animation de fondu en entrée ou en sortie lorsqu’un utilisateur passe sa souris sur une image. C’est un moyen subtil mais efficace de rendre nos sites plus attrayants et interactifs.

Nous avons trouvé que ces petits indices visuels peuvent faire une grande différence dans la façon dont les internautes interagissent avec notre contenu. Il ne s’agit pas seulement d’embellir le site, ces animations peuvent également encourager les internautes à explorer davantage notre contenu.

Dans cet article, nous allons vous afficher comment ajouter cet effet de fondu d’image au survol de la souris dans WordPress.

Pourquoi un fondu des images au passage de la souris dans WordPress ?

Les animations sont un moyen facile de rendre votre site plus intéressant et peuvent même attirer l’attention de l’internaute sur le contenu le plus important de votre page, comme le logo de votre site ou un appel à l’action.

Il existe de nombreuses façons d’utiliser les 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 internautes les survoleront.

Cela encourage les gens à interagir avec vos images et peut même ajouter un élément de narration à la page. Par exemple, différentes images peuvent apparaître en fondu au fur et à mesure que l’internaute se déplace sur la page.

Contrairement à d’autres animations, l’effet de fondu de l’image au passage de la souris est subtil, de sorte qu’il n’aura pas d’impact négatif sur l’expérience de lecture du visiteur ou sur l’optimisation de l’image que vous avez réalisée.

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

Méthode 1 : Ajouter un fondu d’image au survol de la souris à toutes les publicités de WordPress

La façon la plus simple d’ajouter un effet de fondu à toutes vos images est d’utiliser WPCode. Cette extension gratuite vous permet d’ajouter facilement du code personnalisé dans WordPress sans avoir à modifier les fichiers de votre thème.

Avec WPCode, même les débutants peuvent modifier le code de leur site sans risquer les erreurs et les fautes de frappe qui peuvent être à l’origine de nombreuses erreurs courantes de WordPress.

La première chose à faire est d’installer et d’activer l’extension gratuite WPCode. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Une fois activé, rendez-vous dans la rubrique Extraits de code  » Ajouter un extrait.

Consultez cette page pour découvrir tous les extraits WPCode prêts à l’emploi que vous pouvez ajouter à votre site. Il s’agit notamment d’un extrait qui vous permet de désactiver complètement les commentaires, de téléverser des types de fichiers que WordPress ne supporte généralement pas, de désactiver les pages de fichiers joints, et bien plus encore.

Il vous suffit de survoler avec votre souris la rubrique « Ajouter votre code personnalisé », puis de cliquer sur « + Ajouter un extrait personnalisé » lorsqu’elle apparaît.

Pour commencer, saisissez un titre pour l’extrait de code personnalisé. Il peut s’agir de n’importe quoi qui vous aide à identifier l’extrait dans le Tableau de bord WordPress.

Pour ajouter un CSS personnalisé à WordPress, ouvrez le menu déroulant « Type de code » et sélectionnez « Extrait CSS ».

Dans l’éditeur/éditrices 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 permet d’estomper chaque image pendant 2 secondes lorsque l’utilisateur survole l’image avec sa souris. Pour que l’image s’estompe plus lentement, il suffit de remplacer « 2s ease » par un nombre plus élevé. Si vous souhaitez que l’image s’estompe plus rapidement, utilisez ‘1s ease’ ou un nombre inférieur.

Vous pouvez également augmenter ou réduire l’opacité en modifiant la ligne opacity:0.6.

Si vous modifiez l’un de ces chiffres, veillez à le faire pour toutes les propriétés (webkit, moz, ms et o) afin que l’effet de fondu soit identique dans tous les navigateurs.

Lorsque vous êtes satisfait de l’extrait, défilez jusqu’à la section  » Insertion « . WPCode peut ajouter votre code à différents Emplacements, par exemple après chaque publication, dans l’interface publique uniquement ou dans l’interface d’administration uniquement.

Pour ajouter un effet de fondu à toutes vos images, cliquez sur « Insertion automatique » s’il n’est pas déjà sélectionné. Ouvrez ensuite le menu déroulant « Emplacement » et choisissez « En-tête du site ».

Ensuite, vous pouvez défiler jusqu’en haut de l’écran et cliquer sur le permutateur « Inactif » pour qu’il se modifie en « Actif ».

Enfin, cliquez sur « Enregistrer l’extrait » pour mettre en direct l’extrait CSS.

Désormais, si vous survolez une image sur votre site WordPress, vous verrez l’effet de fondu en action.

Méthode 2 : Ajout d’animations de fondu-enchaîné d’images à des pages individuelles

L’utilisation d’un effet de fondu pour chaque image peut s’avérer gênante, en particulier si votre site comporte une galerie de photos, un stock de photos ou tout autre site contenant de nombreuses images.

Dans cette optique, vous pouvez souhaiter utiliser les effets de fondu uniquement sur une page ou une publication spécifique.

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

Pour ce faire, il suffit de créer un extrait de code personnalisé et d’ajouter le code d’animation de fondu en suivant le même processus que celui décrit ci-dessus. Cliquez ensuite sur le bouton « Enregistrer l’extrait ».

Ensuite, défilez jusqu’à la section « Insertion », mais sélectionnez cette fois « Code court ».

Cela crée un code court que vous pouvez ajouter à n’importe quelle page, publication ou zone prête à recevoir des widgets.

Ensuite, allez de l’avant et rendez l’extrait direct en suivant le même processus que celui décrit ci-dessus.

Vous pouvez maintenant aller sur n’importe quelle page, publication ou zone prête à accueillir des widgets et créer un nouveau bloc « Code court ». Ensuite, il vous suffit de coller le code court WPCode dans ce bloc.

En savoir plus sur la manière de placer le code court, Veuillez consulter notre guide sur l’ajout d’un module court dans WordPress.

Une fois cela fait, cliquez sur le bouton « Mettre à jour » ou « Publier » pour activer le shortcode. Vous pouvez alors visiter cette page, cette page ou cette zone prête à accueillir un widget pour voir l’effet de fondu au passage de la souris.

Méthode 3 : Ajout d’animations de fondu aux images mises en avant

Une autre option consiste à ajouter des animations en fondu à vos images mises en avant ou aux miniatures de vos publications. Il s’agit des images principales de la publication.

En faisant disparaître les images avant le survol de la souris, vous pouvez rendre votre site plus attrayant et attrayant sans avoir à animer chaque image sur votre blog ou site WordPress.

Pour ajouter une animation en fondu aux miniatures de vos publications, il suffit de créer un nouvel extrait de code personnalisé en suivant le même processus que celui décrit ci-dessus.

Cependant, cette fois-ci, ajoutez le code suivant dans 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;
}

Ensuite, défilez jusqu’à la case « Insertion » et sélectionnez « Insertion automatique ».

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

Ensuite, vous pouvez aller de l’avant et rendre l’extrait de code direct en utilisant le même processus que celui décrit ci-dessus.

Désormais, vous pouvez survoler avec la souris n’importe quelle image mise en avant pour voir l’animation en fondu en action.

Si vous souhaitez ajouter encore plus d’effets de survol d’image, alors consultez notre guide sur l ‘ajout d’effets de survol d’image dans WordPress.

Effets bonus à ajouter à vos images WordPress

Les effets de fondu sont un moyen amusant de rendre les images plus intéressantes, mais il y a beaucoup d’autres façons d’utiliser les animations dans WordPress. Par exemple, vous pouvez utiliser des animations flipbox pour révéler du texte lorsqu’un internaute survole une image ou des effets de zoom pour que les utilisateurs/utilisatrices puissent explorer une image plus en détail.

Voici d’autres effets intéressants que vous pouvez ajouter à vos images :

• Comment ajouter des filtres photo de type Instagram dans WordPress (étape par étape).
• Comment afficher une photo avant et après dans WordPress (avec effet diapositive)
• Comment ajouter Aucun 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 de la souris dans WordPress. Vous pouvez également consulter notre guide sur la façon d’organiser les fichiers WordPress dans les dossiers de la bibliothèque multimédia et nos choix d’experts des meilleurs plugins et outils d’images avant pour WordPress.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.