Change image (logo) on navbar hover

Question

I need to change this code below, so when i hover on the navbar, the image change from white logo (default logo) to colored logo. i tried background-image, but it seems that the white logo still there, and i want it to disapear while only colored logo appear.

.header-area.header-sticky:hover .logo{
    background-image: url('./img/Smartlogger_colored_logo.png');
}

.header-area.header-sticky:hover {
  min-height: 80px;
  background-color: #D7D7D7;
}

.header-area.header-sticky:hover li a{
  color: #000000;
}

.header-area .nav {
  margin-top: 30px;
}

.header-area.header-sticky .nav li a.active {
  color: #25d6f5;
}

<header className='header-area header-sticky'>
      <div className='container'>
        <div className='row'>
          <div className='col-12'>
            <nav className='main-nav'>
              {/* ***** Logo Start ***** */}
              <a href='/#' className='logo'>
                <style>{css}</style>
                <img
                  src={isScrolled ? coloredLogo : whiteLogo}
                  alt={
                    isScrolled
                      ? "SmartLogger white logo"
                      : "SmartLogger colored logo"
                  }
                />
              </a>
              {/* ***** Logo End ***** */}
              {/* ***** Menu Start ***** */}
              <ul className='nav'>
                <li>
                  <a href='/#iotsolutions'>Nos valeurs</a>
                </li>
                <li>
                  <a href='/#produits' /* className="active" */>
                    Nos solutions
                  </a>
                </li>
                <li>
                  <a href='/#expertise'>Notre expertise</a>
                </li>
                <li>
                  <Link to='/apropos'>À propos</Link>
                </li>
                <div class='main-button-red'>
                  <div class='scroll-to-section'>
                    <Link to='/contact'>CONTACT</Link>
                  </div>
                </div>
              </ul>
              {/* ***** Menu End ***** */}
            </nav>
          </div>
        </div>
      </div>
    </header>

Answer 1

There are a number of options you could follow:

• Perhaps my favourite, is to use an svg image. You display the coloured svg image and you can then update the colour directly from css, e.g. here.

  To do so:

  1. Display your coloured svg as an <svg className="logo"> .. </svg> element instead of <img .. />
  2. In your css, add under .logo svg either fill: #fff or color: #fff depending on how your svg has been constructed (try them both to see which one will work for your case)
  3. Finally, you can set your .logo svg:hover to have either fill: unset or color: unset; That will force your image to inherit the original colours, thus making it white by default and coloured on hover.

• As Andru suggested, display different images depending if that's hovered or not. That will need extra js logic for it, aside from needing duplicated images, thus I'd avoid it for performance concerns

• Same as the other point suggested by Andru, you can remove the <img> element and set your image directly as a background color as you were trying to do in the first place. It'd be something like:

  <a href='/#' className='logo' />
  

  .logo {
     background-image: url('logo-white.png');
  }
  
  .logo:hover {
     background-image: url('logo-color.png');
  }
  

  But note that this is also not an optimised solution, as it'd require you to use duplicated images.