How to Add GrayScale Hover Effect to Images in WordPress

by

Hey Guys, In this post I will share a very simple technique to add Gray-scale Hover Effects to the images in WordPress.  We will achieve these effects only using CSS. I will be sharing a couple of approaches in this Post.

1. Adding GrayScale Hover Effects to all the Images

2. Adding the Grayscale Hover Effect to the Images in a Specific Posts / Pages

1. Adding Effect to all  Images.

We will me making use of the Simple Custom CSS Plugin for this. This is a simple but very effective plugin. It  allows Administrators to add custom style rules to the website.

Step 1. 

Download and Install the Simple Custom Css Plugin

This plugin allows us to insert Custom CSS to the website without making changes to the code.

Step 2.

Add the following code snippet to the Custom CSS Box.

Got to Appearance-> Custom CSS and paste the following snippet.  This snippet will add Gray Scale Hover effects to all the images. The snippet is quite simple and you can customize the transition speed etc by modifying the parameters



img {
  -webkit-filter: grayscale(0%); /* For Webkit browsers */
  -webkit-transition: .5s ease-in-out; /* For Webkit browsers */
  -moz-filter: grayscale(0%); /* For Firefox */
  -moz-transition: .5s ease-in-out; /* For FireFox */
  -o-filter: grayscale(0%);
  -o-transition: .5s ease-in-out;
} 
 
img:hover {
  -webkit-filter: grayscale(100%); /* For Webkit browsers */
  -webkit-transition: .5s ease-in-out; /* For Webkit browsers */
  -moz-filter: grayscale(100%); /* For Firefox */
  -moz-transition: .5s ease-in-out; /* For Firefox */
  -o-filter: grayscale(100%); 
  -o-transition: .5s ease-in-out;
}

Step 3.

Results

Here are the results.  Quite impressive for 2 minutes of work 🙂

Bike Image - No GreyScale
This is the original IMage
Bike Image with GreyScale Effect
Image with hover effects applied

2. Adding Effects to Images in  Specific posts

Some times you might want to add hover effects to a particular post only. For Example if you want to apply hover effects to a dedicated gallery page then this approach is for you. We will be making use of the WordPress Post Styling plugin created by Joe Dolson. WP Post Styling Plugin allows you to create custom styles snippets and insert them into specific Page / Posts.

Here are the steps to configure and use the plugin.

Step 1.

Install and activate the plugin

As mentioned above, this plugin will add a Custom CSS Metabox in the Post / Page Editor Screen.

Step 2.

Create a Custom Style Rule:

Go to Settings -> Wp Post Styling and create a New Style Rule. We will name it Image Hover Style

Custom CSS Style Snippet Screen

Step 3.

Apply the snippet.

Got to any post / page and simply select the saved css snippet. This will is apply the CSS to that particular post only.

Add Custom Style to a Post

Conclusion

This is a simple technique which allows you to quickly add hover effects without coding. One can also apply effects like Fade-in / Fade- Out etc using this technique.

If you guys want me to cover more image effects Or If you face any problems, then let me know in the comments.

Ankit
Latest posts by Ankit (see all)

22 thoughts on “How to Add GrayScale Hover Effect to Images in WordPress”

    • It should.. since we are applying rules to core css classes… Having said that its best to test stuff before you make it live

      Reply
  2. Pingback: Hey Guys, Here is a simple technique to… | MotionBump

  4. HI
    tnks for let us know how to do it
    i would love to use it on my portfolio website, do you know how to do it just with the tumbnails and not with the portfolio images???

    Reply

  5. HI Jose,

    You can target a particular CC class with this technique.. So you will need to find out the css class used on thumbnails and then apply the hover effect…

    Reply

  6. This is a great tutorial – thanks! I have a question though. When I applied the effect it also changed my logo, which I do not want to have this effect. Is there any easy way to make this snippet for a class, such as “img1” and then wrap the image in a div?

    Reply

    • Hello Grant..
      Yeah it is doable. I have a couple of approaches in mind:

      1) One approach could be to create a child theme and apply a different class to the Logo.. In that way the logo will remain un-affected

      2) Another approach could be to add a custom css class to the images. The WP Media editor allows to add a custom css class to the uploaded images. So every time you add an image, just apply the css class.

      Cheers,
      Ankit

      Reply

  8. Hi, this worked great! Thank you.
    Just wondering if you have code for making photos go from B&W to color on hover?
    Thanks in advance
    Mikaela

    Reply

  11. Hello,

    Is there any way to reverse this? So the image is grayscale until mouseover instead of going grayscale after mouseover?

    Thank you!

    Reply

    • Just reverse the above code as follows:
      img {
      -webkit-filter: grayscale(100%); /* For Webkit browsers */
      -webkit-transition: .5s ease-in-out; /* For Webkit browsers */
      -moz-filter: grayscale(100%); /* For Firefox */
      -moz-transition: .5s ease-in-out; /* For Firefox */
      -o-filter: grayscale(100%);
      -o-transition: .5s ease-in-out;
      }

      img:hover {
      -webkit-filter: grayscale(0%); /* For Webkit browsers */
      -webkit-transition: .5s ease-in-out; /* For Webkit browsers */
      -moz-filter: grayscale(0%); /* For Firefox */
      -moz-transition: .5s ease-in-out; /* For FireFox */
      -o-filter: grayscale(0%);
      -o-transition: .5s ease-in-out;
      }

      Reply

  13. Hi ! Thank you for this tip, that you would know how to ad this effect on post list too? I don’t need effect, just B&w effect on demand.
    Ty!
    🙂

    Reply

  16. Great Ankit! I cannot reverse it (from BW to color!) like Milind g wrote. Is it possible to hover with a slow fade? Thanks

    Reply

Leave a Comment