Images increase user engagement on websites. This is why you need to optimize images, learn how to add beautiful image galleries, and fix any image issues on your site. There are many ways to make your images standout. One of them is using a fade effect on images. In this article, we will show you how to fade images on mouseover in WordPress.
Basically when the user brings their mouse over an image on your site, it will fade slightly. See the example screenshot below:
First we will show you is how to add simple fade effect on images in your WordPress posts. We will be using CSS for that. All you need to do is copy and paste the following code in your theme or child theme’s style.css file.
.post img:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
This CSS snippet will effect all images displayed in WordPress posts. However, there is a slight glitch in this snippet. When a user takes mouse over to an image, it instantly switches the opacity. This feels a bit rough, right? Lets make it a little smoother by adding CSS transition rules.
.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;
}
You can also reverse this effect by setting a lower default opacity for your images, and then easing into full opacity producing a glowing effect. All you need to do for that is use the following CSS in your stylesheet:
.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;
}
Some of our users may not want to add this effect to all images in their posts. How about just featured images or post thumbnails? To add this effect to only your post thumbnails, you can use the default .wp-post-image class generated by WordPress for featured images. Simply replace .post img:hover with img.wp-post-image:hover.
You can tweak the opacity value or transition delay time to get your desired effect. We hope this article helped you learn how to fade images on mouseover in WordPress. Let us know what you think by leaving your feedback and questions in the comments below. Don’t forget to follow us on Twitter.
this is a nice post it it help me to add some effect on post image but i was look for how to make my feature image zoom in and out when i hover on it please any help.
Hello!
I´m looking for a different hover effect, I need to change the image when the user hovers over it, can it be done?
I really appreciate your guide on this!
Thank you! Works like a charm!
Where in the style.css do I place the code
use a widget called simple custom css and paste the code there. you will find plugin in appearance after activation.
Is it possible to apply this only to linked images? That would be a huge breakthrough for me! Thanks
Nothing happen when I paste the code on my styl.css file.
Where need i to paste the code in this file ?
Great, really! How do you apply a white fade though?
Fantastic! Thanks a lot!
I am a complete amateur but this works really well on my post pages – How do I amend the code for static pages?
Thank’s for useful article:)
Great post. I’ve even added black and white to the effect too with “grayscale” filters.
Thanks! That works excellent. I have not been using the transitions and that really makes it more elegant.
How about other efffects like zooming?
Sure we will try to cover them in some future article.
Thanks for this simple breakdown of how to do this, I’m going to give this a try, if only to play with the different options and see how it affects things. Great stuff, thanks.