Docs

[avanaa]

Hello
I use this custom CSS to change logo color on hover:

.x-brand:hover img{
content: transparent;
}
.x-brand:hover img{
content: url(http://www.mysite.com/…/logo_hover.png);
}

It works but there is a micro glitch on hover (there is a tiny moment where original logo disappears and the hover image appears.

Please help me correct this!

[avanaa]

This reply has been marked as private.

[Rupok]

Hi there,

Your code doesn’t look correct specially this part :

.x-brand:hover img{
content: transparent;
}

And I can’t see any difference for the code.

Thanks!

[avanaa]

.x-brand:hover img{
content: transparent;
}

was just testing to remove the glitch (it didn’t work).

So if I only use this:

.x-brand:hover img{
content: url(http://www.mysite.com/…/logo_hover.png);
} 

I get the glitch first time I hover over the logo. After I hover once, the glitch disappears afterward.

Any way to go around this?

[Jade]

Hi there,

Please try adding this code:

.masthead-stacked .x-brand {
    width: 100px;
    height: 100px;
}

Hope this helps.

[Author]

Posts