How to Add GrayScale Hover Effect to Images in WordPress

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

Bike Image with GreyScale Effect

 

 

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.

Did you enjoy this article?
We regularly publish WordPress related Tutorials and Tips on this blog. Signup today and receive free updates straight in your inbox.
About Ankit

Founder of Spicemailer. SpiceMailer lets you create and send beautiful Newsletters in minutes.

I have also released 17 Wordpress Plugins till date .

I regularly publish Wordpress related Tutorials and Tips on this blog.
If you like the content then consider subscribing to the blog here.

Comments

  1. Ok.. So will it work will every theme?

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

  2. Nice Tutorial.. Maybe you should create a plugin to add image hover effects.. :)

  3. 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???

  4. 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…

  5. 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?

    • 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

  6. that’s great.
    very simple and work likes charm!

  7. 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

  8. I finally found what I needed. Thank you so much!

  9. Hi, thanks for nice tip!
    I have tried css to my website on Visual Composer, and grayscale hover work!
    However, it work on Chrome but not on Explorer(ver.10)
    This is link of my site,
    http://designanche.com/interior-portfolio/hotel/

    Can you tell me why?

    Thanks alot

    Kei

  10. Hello,

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

    Thank you!

  11. Hello, thanks for this greate tool. Is it poosible to change the effect? First gray and mousehover color?

Trackbacks

  1. Hey Guys, Here is a simple technique to… | MotionBump says:

    […] How to Add GrayScale Hover Effect to Images in WordPress […]

Speak Your Mind

*


4 + = 9