Voulez-vous estomper les images au passage de la souris dans WordPress ?
La décoloration des images contribue à rendre votre site plus interactif et attrayant. De plus, cela peut augmenter le temps que vos visiteurs passent sur votre site Web.
Dans cet article, nous allons vous montrer comment ajouter facilement un effet d’image de fondu au passage de la souris dans WordPress.
Pourquoi Fade Images sur Mouseover dans WordPress ?
En ajoutant des effets de survol d’image, comme une image de fondu au passage de la souris, vous pouvez facilement faire ressortir les images de votre site Web WordPress.
L’effet de fondu d’image permet aux images de votre site Web d’apparaître ou de disparaître lentement lorsque les utilisateurs les survolent.
Cela rend les éléments statiques comme les images beaucoup plus attrayants et amusants pour vos visiteurs et crée une meilleure première impression.
De plus, l’effet de fondu au passage de la souris est subtil et n’aura pas d’impact négatif sur l’expérience de lecture de votre visiteur ou sur toute optimisation d’image que vous avez effectuée.
Cela dit, montrons comment ajouter un fondu à vos images au passage de la souris dans WordPress, étape par étape.
Ajout d’un fondu d’image au passage de la souris sur WordPress
Ce didacticiel nécessite une compréhension de base de la façon d’ajouter du code CSS à WordPress. Pour plus de détails, consultez notre guide sur la façon d’ajouter facilement du CSS personnalisé à votre site WordPress.
Ensuite, vous pouvez ajouter le code CSS suivant à votre site pour ajouter un simple fondu sur les images que vous ajoutez aux publications WordPress.
.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 efface votre image pendant 2 secondes lorsque votre utilisateur le survole. Vous pouvez augmenter ou diminuer l' »opacité » et modifier la « facilité 2s » pour atténuer l’image plus rapidement ou plus lentement.
Si vous modifiez la facilité, assurez-vous de la modifier dans toutes les propriétés (webkit, moz, ms, etc.), afin que votre effet de fondu fonctionne sur tous les navigateurs.
Voici comment il apparaîtra à vos visiteurs.
Si vous souhaitez rendre l’effet de fondu plus visible, vous pouvez commencer avec une image fanée et se faner lentement jusqu’à ce que l’image soit claire.
Pour ce faire, collez l’extrait de code CSS ci-dessous dans votre site.
.post img { opacity:0.7; filter:alpha(opacity=70); /* For IE8 and earlier */ } .post img:hover{ opacity:1.0; filter:alpha(opacity=100); /* 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; }
Comme pour le premier extrait de code, vous pouvez ralentir ou accélérer l’effet de fondu et modifier les niveaux d’« opacité ».
Voici à quoi cela ressemblera pour vos visiteurs.
Ajout d’un effet de fondu à l’image en vedette ou aux vignettes de publication
Si vous ne voulez pas que l’effet de fondu d’image apparaisse sur chaque image de vos publications, vous pouvez ajouter l’effet à des images spécifiques comme votre image vedette ou la vignette de votre publication.
Pour ce faire, ajoutez simplement l’extrait CSS suivant à votre site WordPress.
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; }
Cet extrait de code utilise le même code CSS que ci-dessus, mais remplace .post img:hover
avec img.wp-post-image:hover
. Toutes les autres images de vos messages resteront les mêmes.
Voici à quoi ressemblera la vignette de votre article avec l’effet de fondu d’image.
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.
Nous espérons que cet article vous a aidé à apprendre à estomper les images au passage de la souris dans WordPress. Vous pouvez également consulter notre guide sur la façon de démarrer votre propre podcast et notre sélection du meilleur registraire de domaine.