Comment estomper des images au survol de la souris dans WordPress (simple et facile)

Voulez-vous faire fondre les images au survol de la souris dans WordPress ?

Une simple animation de fondu entrant ou sortant lorsqu'un utilisateur déplace sa souris sur une image peut rendre votre site plus attrayant. Cela encourage également les visiteurs à interagir avec votre contenu, ce qui peut les maintenir sur votre site plus longtemps.

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

Pourquoi fondre les images au survol de la souris dans WordPress ?

Les animations sont un moyen simple 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, comme le logo de votre site Web ou un appel à l’action.

Il existe de nombreuses façons différentes 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 visiteurs 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 et disparaître au fur et à mesure que le visiteur se déplace sur la page.

Contrairement à certaines autres animations, l’effet de fondu de l’image au survol de la souris est subtil et n’aura donc pas d’impact négatif sur l’expérience de lecture du visiteur ou sur l’optimisation de l’image que vous avez effectuée.

Cela dit, montrons comment ajouter un fondu à vos images au survol de la souris dans WordPress.

Ajout d'un fondu d'image au survol de la souris à toutes les images WordPress

Le moyen le plus simple d’ajouter un effet de fondu à toutes vos images consiste à utiliser WPCode. Ce plugin gratuit vous permet d'ajouter facilement du code personnalisé dans WordPress sans avoir à modifier vos fichiers de thème.

Avec WPCode, même les débutants peuvent modifier le code de leur site Web sans risquer d'erreurs et de fautes de frappe qui peuvent provoquer de nombreuses erreurs WordPress courantes.

La première chose que vous devez faire est d'installer et d'activer le plugin gratuit WPCode. Pour plus de détails, consultez notre guide étape par étape sur la façon d'installer un plugin WordPress.

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

Ici, passez simplement votre souris sur « Ajouter votre code personnalisé ».

Lorsqu'il apparaît, cliquez sur « Utiliser l'extrait ».

Pour commencer, saisissez un titre pour l’extrait de code personnalisé. Il peut s'agir de tout ce qui vous aide à identifier l'extrait dans le tableau de bord WordPress.

Nous devons ajouter du CSS personnalisé à WordPress, alors ouvrez la liste déroulante « Type de code » et sélectionnez « Extrait CSS ».

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

.post 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 fondra chaque image pendant 2 secondes lorsque l'utilisateur passe la souris dessus. Pour ralentir le fondu de l’image, remplacez simplement « facilité 2s » par un nombre plus élevé. Si vous souhaitez que l'image s'estompe plus rapidement, utilisez « 1 s de facilité » ou une valeur inférieure.

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

Si vous modifiez l'un de ces chiffres, assurez-vous de le modifier dans 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, par exemple après chaque publication, frontend uniquement ou administrateur uniquement.

Pour ajouter un effet de fondu à toutes vos images, cliquez sur « Insertion automatique ». Ensuite, ouvrez le menu déroulant « Emplacement » et choisissez « En-tête large du site ».

Après cela, vous êtes prêt à faire défiler vers le 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.

Désormais, si vous passez la souris sur n’importe quelle image de votre site Web WordPress, vous verrez l’effet de fondu en action.

Ajout d'animations de fondu d'image à des pages individuelles

L'utilisation d'un effet de fondu pour chaque image peut devenir gênante, surtout si vous exploitez un site Web de photographie, un magasin de photos ou tout autre site contenant de nombreuses images.

Dans cet esprit, vous souhaiterez peut-être 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 à accueillir un widget.

Après cela, continuez et diffusez l'extrait en suivant le même processus décrit ci-dessus.

Vous pouvez maintenant accéder à n’importe quelle page, publication ou zone prête à accueillir un widget 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 la façon d'ajouter un shortcode dans WordPress.

Cela fait, cliquez sur le bouton « Mettre à jour » ou « Publier » pour activer le shortcode. Vous pouvez ensuite visiter cette page, cette page ou cette zone prête à accueillir un widget pour voir l'effet de fondu au survol de la souris.

Ajout d'animations de fondu d'image aux images en vedette

Une autre option consiste à ajouter des animations de fondu à vos images en vedette ou à publier des miniatures. Il s’agit de l’image principale de la publication et elles apparaissent souvent à côté du titre de votre page d’accueil, des pages d’archives et d’autres zones importantes de votre site Web.

En estompant les images présentées au survol de la souris, vous pouvez rendre votre site plus accrocheur et attrayant, sans animer chaque image de votre blog ou site Web WordPress.

Pour ajouter une animation de fondu aux miniatures de votre publication, 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 case « Insertion » et sélectionnez « Insertion automatique ». Ensuite, ouvrez le menu déroulant « Emplacement » et choisissez « En-tête large du site ».

Après cela, vous pouvez continuer et mettre en ligne l'extrait de code en utilisant le même processus décrit ci-dessus.

Désormais, vous pouvez passer la souris sur n'importe quelle image présentée pour voir l'animation de fondu en action.

Si vous souhaitez ajouter encore plus d’effets de survol d’image, consultez notre guide sur la façon d’ajouter des effets de survol d’image dans WordPress.

Bonus : animez n’importe quelle image, texte, bouton et plus encore

Les effets de fondu sont un moyen amusant de rendre les images plus intéressantes, mais il existe de nombreuses 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 visiteur survole une image, ou utiliser des effets de zoom pour que les utilisateurs puissent explorer une image plus en détail.

Si vous souhaitez essayer différents effets, SeedProd propose plus de 40 animations que vous pouvez ajouter aux images, au texte, aux boutons, aux vidéos, etc. Vous pouvez même animer des sections et des colonnes entières en quelques clics.

Dans l'éditeur SeedProd, cliquez simplement sur le contenu que vous souhaitez animer, puis sélectionnez l'onglet « Avancé » dans le menu de gauche.

Vous pouvez ensuite continuer et cliquer pour développer la section « Effets d’animation ».

Après cela, choisissez simplement une animation dans la liste déroulante « Animation d’entrée », comprenant un large éventail d’effets de fondu différents.

Pour plus d’informations, veuillez consulter notre guide sur la façon de créer une page de destination avec WordPress.

Nous espérons que cet article vous a aidé à apprendre à estomper les images au survol de la souris dans WordPress. Vous voudrez peut-être également consulter notre guide sur la façon de choisir le meilleur logiciel de conception de sites Web et nos sélections d'experts des meilleurs plugins contextuels WordPress.

Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.