Header image color change on hover?

[[email protected]]

Is it possible to change the hover color on a site header image? I'd like the logo image I've uploaded (png format) to change to the same color on hover that my nav menu links change to. Any input is greatly appreciated!

http://dreamandcotravel.com

[WisdmLabs]

Hi,

You can change color of an image by using CSS3 filter property.

Example of filter property:-
img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}

There is no option to specify exact color, and filter property has browser compatibility issue. Filter property is not supported in Internet Explorer 11 and all versions of Opera Mini browser and has partial support in Microsoft Edge.

You can check all browsers compatibility here.

But there is one way to achieve this task. You can simply make logo image with any color you want and on hover replace logo image.

Sagar Chaudhari from Wisdmlabs

---

http://wisdmlabs.com/

[Victor Font]

The only way to change the color of an image is to change the image itself. I'm assuming you want the image to be pink like the menu items? I can't give you the exact code because you have right click disabled on your site and I can't use my browser inspect tool to view the underlying code.

If you are displaying the Dream & Co image in the typical way, there is inline CSS inserted into your page that looks something like this:

.site-title a {
    background: url(https://victorfont.com/wp-content/uploads/2015/06/dream-co-logo.png) no-repeat !important;
}

If that code was in the style sheet instead of injected inline, all you would have to do is add the following to the style sheet after the code above:

.site-title a:hover {
    background: url(https://victorfont.com/wp-content/uploads/2015/06/dream-co-pink-logo.png) no-repeat;
}

However, because it is injected code, the !important tag makes things a little more complicated. The !important tag forces a specific CSS directive to overrride everything else related to the affected HTML elememnt.

What I would do to make this easier is remove the logo from the WordPress customizer and add the injected CSS code directly to my style sheet. Remove the !important tag as well and you should be fine.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts