Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to change logo colour on hover


AndyM

Question

  • Answers 21
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

@emily.klein .header-title-logo a:hover { background-image: url(https://static1.squarespace.com/static/5f2f799736006c7367764ef2/t/5f8f8678f8ed836e94d61a44/1603241593053/piece-collectors-icon-lo

Perfecto! Thanks @creedon

try background-size: cover;

Posted Images

21 answers to this question

Recommended Posts

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

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 1

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

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
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. 

Link to post
  • 0
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.

Link to post
  • 0

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 post
  • 0

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

Screenshot 2020-10-10 at 10.22.40.png

Link to post
  • 0

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 post
  • 0

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 post
  • 0

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.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0

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

Link to post
  • 0
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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0
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 post
  • 0
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 post
  • 0
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;

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...