Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Fade Images on Mouseover in WordPress

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
How to Fade Images on Mouseover in WordPress

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:

image fade effect

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.


Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. Gabriel Njogu says:

    Where in the style.css do I place the code

    • ankush says:

      use a widget called simple custom css and paste the code there. you will find plugin in appearance after activation.

  2. Justin says:

    Is it possible to apply this only to linked images? That would be a huge breakthrough for me! Thanks

  3. Fabien says:

    Nothing happen when I paste the code on my styl.css file.
    Where need i to paste the code in this file ?

  4. Brent says:

    Great, really! How do you apply a white fade though?

  5. TDot says:

    Fantastic! Thanks a lot!

  6. C Cook says:

    I am a complete amateur but this works really well on my post pages – How do I amend the code for static pages?

  7. Pancho Angarev says:

    Thank’s for useful article:)

  8. RW says:

    Great post. I’ve even added black and white to the effect too with “grayscale” filters.

  9. John says:

    Thanks! That works excellent. I have not been using the transitions and that really makes it more elegant.

  10. Fernando says:

    How about other efffects like zooming?

  11. Daryl says:

    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.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.