Custom logo hover

Hello all !

Thanks for your amazing themes !

I’m now working on local and trying to set a hover image to my custom logo on the site branding area.

I’m not finding how to do it.

Could you help me on this ?

Thanks a lot !

Hello,

Can you please describe what exactly you want to achieve and provide a link to your website in order to let me check it? You can use some link shortener if you don’t want to leave the link to your site in this topic.

Kind Regards, Roman.
aThemes Support

Hello Roman !

I can’t give you a link because I’m on local.
But what I want to achieve is pretty simple.

If you look at the screenshot, I just want that the logo (that I uploaded from the customizer) change his color when my mouse is on it. To do that, I made the exact same png but yellow instead of white. I just can’t manage to insert it somewhere (in the code) to make it work.

Sorry for my English, and thanks for the help :wink:

Hello,

You can try to add this CSS code in Customize → Additional CSS section:

img.custom-logo:hover {
    filter: brightness(.5) sepia(1) saturate(100) hue-rotate(50deg);
}

Here is a relevant link:

Kind Regards, Roman.
aThemes Support

Thanks Roman, I’m starting to understand,

Thanks to you, I know that I have to change img.custom-logo: hover.

Your code works but now I need to define the exact color I want.
In your link I didn’t find how to change the color precisely (I want the same yellow used in the Astrid theme).

Then I tried to do it with the hover image I made (the logo in yellow). And what I understood is that when I put background-image (instead of filter) in my code, it works but it’s behind the white logo (the first image) so we can’t see it. How can I hide the first image so then I could see the hover one ?

Sorry I feel that I’m not very clear, but I’m trying to understand :slight_smile:

Thanks a lot !

Hello,

How can I hide the first image so then I could see the hover one ?

I don’t think that I can provide much help here without a link, unfortunately.

Kind Regards, Roman.
aThemes Support