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.
