Jump to content

Logo hover

Recommended Posts

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

Link to comment
  • Replies 1
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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

Screenshot_275.png

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.