I am using a WordPress theme called vigor. I was wondering if I could have my logo in grey scale, and once I hover over the logo it would change in to a colour version. How can this be done. In my theme menu I have a place for custom CSS and jQuery. I also have both versions in a PNG.

5 Answers

Yes, this is possible! No need for seperate PNG images.

You can use the following code, with CSS filters:

HTML:

<img src="">

CSS:

#logo { -webkit-filter: grayscale(100%); -webkit-transition: .5s ease-in-out; -moz-filter: grayscale(100%); -moz-transition: .5s ease-in-out; -o-filter: grayscale(100%); -o-transition: .5s ease-in-out;
}
#logo:hover { -webkit-filter: grayscale(0%); -webkit-transition: .5s ease-in-out; -moz-filter: grayscale(0%); -moz-transition: .5s ease-in-out; -o-filter: grayscale(0%); -o-transition: .5s ease-in-out;
} 

JSFiddle example

1

You can use the CSS 3 Filters. Try this.

#sampleImage { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%);
}
#sampleImage:hover { -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -o-filter: grayscale(0%);
}

Try this:

/* change image on hover */
a.Header-branding:hover img { visibility: hidden;
}
a.Header-branding:hover { background-image: url(); background-size: cover;`enter code here` background-repeat:no-repeat;
}

You can do it like this

#logo:hover { background-image:url('color-1.png') }

#logo { background-image:url('color-2.png') }

I have been using this this jquery plugin: for images grayscale. It's easy to use and implement as you only need to add grayscale class to an image or grayscale grayscale-fade for hover effect. I've used this plugin in may projects, because the css filters do not work in all browsers, mainly Internet explorer and I have checked many grayscale plugins out there to find the one that really gets the job done and I've been sticking to this one.

Hope it helps

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.