Jump to content

How to change logo colour on hover

Recommended Posts

I got it!

.header-title-logo a:hover img {
  visibility: hidden;
}
.header-title-logo a:hover {
  background-image: url('https://static1.squarespace.com/static/5f7cd49fb45e5409f742bf77/t/5f80cea6ff1ed526c3a58c85/1602277031045/Thin%2BAM%2BLogoRED.png');
  background-size: contain;
}

So add this to Design > Custom CSS

But, you'll need to replace the link.

  1. Make another logo with the color you want
  2. Design > Custom CSS
    • scroll to bottom and find Manage Custom Files
  3. Upload your colored logo
  4. Delete the link in the code that I put (and not the apostrophes). Click so the text cursor is between the apostrophes. 
  5. Click the file that shows up in Manage Custom Files and it should insert the link where you put the text cursor. 
  6. Done

Hopefully that works. It worked on mine

Thin+AM+LogoRED.png

Link to comment
34 minutes ago, AndyM said:

Hi,

 I've tried it several times but I can't seem to get it to work. I don't think I've missed anything

 

Thanks for helping

Above code for SS 7.1.

Your site is SS 7.0

Use this code

/* change image on hover */
a.Header-branding:hover img {
    visibility: hidden;
}
a.Header-branding:hover {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg);
    background-size: cover;
    background-repeat:no-repeat;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

Hi @Marzon Thanks for sharing this code, super helpful.

I got it to work except that it seems to repeat the image below. I then resized the image to match the original logo size which almost works but it seems to repeat on the right hand side (only slightly)

I wonder if I need to change "background-size: contain" to a different command? Or if I need to just play around with the image size?

https://clover-chinchilla-wcbd.squarespace.com/

 

Screen Shot 2020-10-21 at 11.45.48 am.png

Screen Shot 2020-10-21 at 11.55.52 am.png

Link to comment

@emily.klein

.header-title-logo a:hover {

  background-image: url(https://static1.squarespace.com/static/5f2f799736006c7367764ef2/t/5f8f8678f8ed836e94d61a44/1603241593053/piece-collectors-icon-logo.png);
  background-repeat: no-repeat;
  background-size: contain;
  
  }

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Thanks everyone for sharing their work, here. I am *so* close, but upon hover the image is larger than the main logo and I'm not sure how to ensure it stays the same size. The image file sizes are the same. Any help?

https://www.cjkeysphotos.com/home (no password)

Here is what I'm using for code:

//header logo
a.Header-branding:hover img {
    visibility: hidden;
}
a.Header-branding:hover {
    background-image: url(https://static1.squarespace.com/static/5f6bbe45973fd1123de3dc09/t/5f9330ad49180a7c6ff74181/1603481774001/CJKeys-Photos-Logo-hibiscus-2.png);
    background-size: cover;
    background-repeat:no-repeat;
}

 

Link to comment

Replace or comment out that CSS and add the following.

.Header-branding-logo:hover {

  content: url( https://static1.squarespace.com/static/5f6bbe45973fd1123de3dc09/t/5f9330ad49180a7c6ff74181/1603481774001/CJKeys-Photos-Logo-hibiscus-2.png );
  
  }

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 4 weeks later...
21 hours ago, JohnMcWaters said:

I'm having trouble getting this implemented as well.

I need my logo image to change on hover, and I've tried putting a few variations I've found in the forums in the Custom CSS window, but they don't seem to work. I have nothing else in my Custom CSS window. Should I just paste the code with nothing else needed?

JackMcWaters.com

Add to Home > Design > Custom CSS

/* show logo on hover */
.logo-image:hover img {
    visibility: hidden;
}
.logo-image:hover a {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/11/work-5382501_640-min.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

Replace with your new logo url

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
4 hours ago, tuanphan said:

Add to Home > Design > Custom CSS


/* show logo on hover */
.logo-image:hover img {
    visibility: hidden;
}
.logo-image:hover a {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/11/work-5382501_640-min.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

Replace with your new logo url

Thank you so much! What did you have to change to get it to work on my site?

Link to comment
On 11/17/2020 at 6:57 AM, tuanphan said:

Add to Home > Design > Custom CSS


/* show logo on hover */
.logo-image:hover img {
    visibility: hidden;
}
.logo-image:hover a {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/11/work-5382501_640-min.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

Replace with your new logo url

Hi tuanphan,

I successfully got my logo to switch when you hover over it, however I've noticed that when doing so the new logo is slightly shorter, like it's compressing it horizontally. The result is you get a little jitter when it switches.

Pixel by pixel, the two images are the same size with the same letter positioning.

Any idea what could be causing this?

 

Link to comment
9 minutes ago, JohnMcWaters said:

Hi tuanphan,

I successfully got my logo to switch when you hover over it, however I've noticed that when doing so the new logo is slightly shorter, like it's compressing it horizontally. The result is you get a little jitter when it switches.

Pixel by pixel, the two images are the same size with the same letter positioning.

Any idea what could be causing this?

 

try background-size: cover;

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...
On 11/17/2020 at 4:57 AM, tuanphan said:

Add to Home > Design > Custom CSS


/* show logo on hover */
.logo-image:hover img {
    visibility: hidden;
}
.logo-image:hover a {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/11/work-5382501_640-min.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

Replace with your new logo url

Hello! I'm having trouble making my alternate logo appear. Any help? Website is: www.brasswoodptown.com

 

Here is the code I used, from your post with my new image:

 

/* show logo on hover */
.logo-image:hover img {
    visibility: hidden;
}
.logo-image:hover a {
    background-image: url('https://static1.squarespace.com/static/5f4adecf3143557c3f431358/t/5fd94158c4119b1ccd284108/1608073560607/Brasswood+Inn_LOGO.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

Link to comment
On 12/16/2020 at 6:24 AM, bcmarimba said:

Hello! I'm having trouble making my alternate logo appear. Any help? Website is: www.brasswoodptown.com

 

Here is the code I used, from your post with my new image:

 

/* show logo on hover */
.logo-image:hover img {
    visibility: hidden;
}
.logo-image:hover a {
    background-image: url('https://static1.squarespace.com/static/5f4adecf3143557c3f431358/t/5fd94158c4119b1ccd284108/1608073560607/Brasswood+Inn_LOGO.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

This code for SS 7.0. Your site is 7.1

Use this new code

/* show logo on hover */
.header-title-logo a:hover img {
    visibility: hidden;
}
.header-title-logo a:hover {
    background-image: url('https://beaverhero.com/wp-content/uploads/2020/11/lock-screen-countdown-min.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

I see your site has some other problems.

1 (Mobile). Some pages have very long content. You can consider adding a back to top button.

2. Some text over images are difficult to read on mobile (homepage). Do you want to add an overlay background?

3. (Mobile) Footer logos is too big. Do you want to set to 2 logos/row?

 

 

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 12/21/2020 at 6:00 AM, tuanphan said:

This code for SS 7.0. Your site is 7.1

Use this new code


/* show logo on hover */
.header-title-logo a:hover img {
    visibility: hidden;
}
.header-title-logo a:hover {
    background-image: url('https://beaverhero.com/wp-content/uploads/2020/11/lock-screen-countdown-min.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

I see your site has some other problems.

1 (Mobile). Some pages have very long content. You can consider adding a back to top button.

2. Some text over images are difficult to read on mobile (homepage). Do you want to add an overlay background?

3. (Mobile) Footer logos is too big. Do you want to set to 2 logos/row?

 

 

 

Amazing!! Thank you so much, that worked perfectly. 

Thank you for the tips. We added a gold button to help the white text be visible over the photos. We don't really like the overlay look, love the photos as is, but realize it makes it harder to read. Do you think it looks better now? 

How do you set the 2 logos/row? I will add a "back to top" link -- good call!  Thanks again.

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.