Change logo to colour on hover

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

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