Docs

[Rich H]

I have tried some code that I found in the forum here and am not having any luck getting my logo to change when I hover over it

.x-navbar.x-navbar-fixed-top .x-brand.img:hover img {
    opacity: 0;
    transition: all 0.15s linear;
}
.x-navbar.x-navbar-fixed-top .x-brand.img:hover  {
   background-image: url(/wp-content/uploads/2017/01/smiley.png);
   background-repeat: no-repeat;
    background-size: contain;
    transition: all 0.5s linear;
}

Site I am trying to do this on is https://carteblanche.media

[Rich H]

I also tried this code without success 🙁

.x-brand:hover img{
   content: url(/wp-content/uploads/2017/01/smiley.png);
}

[Rupok]

Hi there,

Thanks for writing in! Let’s try this :

x-brand.img:hover::after {
  content: url(https://carteblanche.media/wp-content/uploads/2017/01/carteblachemedia_logo.png);
}

x-brand.img:hover img {
  display: none;
}

Change the logo path to a different logo.

Cheers!

[Rich H]

Thanks, that almost got it, just had to add a . to the beginning of x-brand.

thank ya!

[Rahul]

Glad to hear it!

Let us know if we can help with anything else.

Thanks for choosing the X-theme.

[Author]

Posts