Is there a plugin to create a image hover effects

Hi guys

Working on some thing at the moment and want to create a image gallery where the images will show in black and white and then on hover will change to original color and then on click will load in actual colour

I am new to Wordpress but a quick learner (or so I have been told)

Thanks in advance guys.

    Michael Bissett

    Hey @shan, hope you're doing well today!

    You can try following the advice given in this article, reversing the elements being targeted inside of your gallery archive page:

    http://spicemailer.com/wordpress/add-grayscale-hover-effects-images-wordpress/

    Let me know if this helps please!

    Kind Regards,
    Michael

    Edit: To clarify my statement of "reversing the elements being targeted", I mean, when applying the grayscale coloring to an element, you'd want to be targeting the normal state, instead of the hover state. Put another way, instead of having the CSS code like this (assuming that you're targeting <img> elements, you'd probably want to target a CSS class):

    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;
    }

    You'd want to have it laid out like this:

    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;
    }