Logo hover

Hi Guys, 

I have the code that make the logo change to white on hover. 

However, when move the cursor away, the logo will fade out like 0.3 seconds then the original logo back in.

How can i make the white logo fade back to the oringial logo?

The current code is 
 

/* Apply a fading effect to the original logo on hover */
.header-title-logo img {
  transition: opacity 0.3s;
}

/* Reduce the opacity of the original logo when hovering */
.header-title-logo:hover img {
  opacity: 0;
}

/* On hover, change the background image of the anchor (logo) and keep the hover logo visible */
.header-title-logo:hover a {
  background-image: url('https://static1.squarespace.com/static/652614420877815fd80f9b4d/t/6530e213146e4f13196c0109/1697702419568/Logo+fixer+Fulll+White_400Kb.png'); /* Replace with the URL of your hover logo */
  background-size: contain;
  z-index: 1; /* Place the hover logo on top */
}

/* Apply a fading effect to the hover logo on hover */
.header-title-logo:hover .logo-hover img {
  opacity: 1;
}

/* Reduce the opacity of the hover logo when not hovering */
.header-title-logo img:not(:hover) + a {
  background-image: none; /* Remove the background image */
  opacity: 0;
}

Website : https://dinosaur-gopher-x6fh.squarespace.com/
pw: makingmovies

1 hour ago, yuinia said:

Hi Guys, 

I have the code that make the logo change to white on hover. 

However, when move the cursor away, the logo will fade out like 0.3 seconds then the original logo back in.

How can i make the white logo fade back to the oringial logo?

The current code is 
 

/* Apply a fading effect to the original logo on hover */
.header-title-logo img {
  transition: opacity 0.3s;
}

/* Reduce the opacity of the original logo when hovering */
.header-title-logo:hover img {
  opacity: 0;
}

/* On hover, change the background image of the anchor (logo) and keep the hover logo visible */
.header-title-logo:hover a {
  background-image: url('https://static1.squarespace.com/static/652614420877815fd80f9b4d/t/6530e213146e4f13196c0109/1697702419568/Logo+fixer+Fulll+White_400Kb.png'); /* Replace with the URL of your hover logo */
  background-size: contain;
  z-index: 1; /* Place the hover logo on top */
}

/* Apply a fading effect to the hover logo on hover */
.header-title-logo:hover .logo-hover img {
  opacity: 1;
}

/* Reduce the opacity of the hover logo when not hovering */
.header-title-logo img:not(:hover) + a {
  background-image: none; /* Remove the background image */
  opacity: 0;
}

Website : https://dinosaur-gopher-x6fh.squarespace.com/
pw: makingmovies

Remove this code and check