悬停时将徽标更改为颜色

Question

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.

Answer 1

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

You can use the following code, with CSS filters:

HTML:

<img id="logo" src="http://lorempixel.com/400/200/">

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

Answer 2

You can use the CSS 3 Filters. Try this.

https://jsfiddle.net/1fog16gn/

#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%);
}

Answer 3

Try this:

/* change image on hover */
a.Header-branding:hover img {
    visibility: hidden;
}
a.Header-branding:hover {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg);
    background-size: cover;`enter code here`
    background-repeat:no-repeat;
}

Answer 4

你可以这样

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

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

Answer 5

I have been using this this jquery plugin: https://github.com/karlhorky/gray 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