How to change logo colour on hover

Site URL: http://andrewmorrisphotography.co.uk

Hi there,

is it possible to change the colour of the logo when the curser hovers over it?

a#site-title:hover {
  color: red;
}

Add this to Design > Custom CSS

You can replace "red" with "rgb(153,153,153)" for more specific colors. 

4 minutes ago, Marzon said:

a#site-title:hover {
  color: red;
}

Add this to Design > Custom CSS

You can replace "red" with "rgb(153,153,153)" for more specific colors. 

Wait, sorry that's for text not logo.

Ok, no worries

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

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

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;
}

That's great thank you 

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/

@emily.klein

Please set up a site-wide password. Post the password here.

We can then take a look at your issue.

Hey @creedon sorted. Password is cactus

Thanks!

@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.

Perfecto! Thanks @creedon

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;
}

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.

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

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

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?

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?

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;

1 hour ago, tuanphan said:

try background-size: cover;

That did it—Thank you!

On 11/18/2020 at 10:53 PM, JohnMcWaters said:

That did it—Thank you!

I see site title on tablet is small. Do you want to increase size?

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;
}

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?

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.