Hover Logo

So far I have a line of code that's allowed me to see a new logo when I hover over my original one, but it's flickering badly outside its intended position. Also I tried to set the size for the hover logo, but maybe that's causing the flickering? Here's what I input... 

.header-title-logo:hover { content: url(https://static1.squarespace.com/static/5eb565960cd9d81d47e3f70a/t/5ee24b486fb4b430cb2037bf/1591888712803/eyetest-2.png); 
max-width: 150px 
}

Could someone please help fix this? So just to summarize, I simply want to have a new logo appear when I hover my original logo. Size 150px and positioned in the same location.

Bonus: If anyone has any idea how to make this new hover logo act as the new 'go home' button too- that'd be amazing... Please let me know~

Thank you

Cool Idea, I should try it and see if I can adjust it a bit. 

10 hours ago, derricksrandomviews said:

Cool Idea, I should try it and see if I can adjust it a bit. 

haha thanks, please let me know! 

10 hours ago, derricksrandomviews said:

Cool Idea, I should try it and see if I can adjust it a bit. 

Actually I tried this new line of code which makes it the hover-over logo clickable and function as the homepage button as well, but it's not centering over the original logo. 

.header-title-logo:hover a:after {
    content: "";
    background-image: url(https://static1.squarespace.com/static/5eb565960cd9d81d47e3f70a/t/5ee24b486fb4b430cb2037bf/1591888712803/eyetest-2.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    display: block;
    position: absolute;
    width: 75%;
    height: 75%;
}

I think the code need some precise margin instructions. 

5 minutes ago, derricksrandomviews said:

I think the code need some precise margin instructions. 

Hey Derrick, I've been playing around it some more and I got it to be in the spot I want. The hover effect works nicely but the "hover zone" around the title is no longer contained within the logo space if that makes sense. If my logo is a square (149 x 154 px), the hover zone which activates my new logo to appear is a large rectangle (149x700 px)! 

.header-title-logo:hover a:after {
    content: "";
    background-image: url(https://static1.squarespace.com/static/5eb565960cd9d81d47e3f70a/t/5ee3078231781f54f188ff3c/1591936899449/22222.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    display: block;
    position: absolute;
    top: 0;
    height:149.984px; width:154px
}

Is there anyway to contain the hover effect to the logo? I inspected this rectangle section and it appears to be titled .header-layout-branding-center-nav-center ? 

Should be possible, but I don't know for sure, this effect has not come up before as far as a logo is concerned. Most times it is an image to replace an image on hover. There is a lot of code floating around to work with image blocks. There should be a way to narrow it down to the logo and not include the majority of the header space. What happens if you just start with title-logo and leave the word header off? Does it kill the effect?

2 minutes ago, derricksrandomviews said:

Should be possible, but I don't know for sure, this effect has not come up before as far as a logo is concerned. Most times it is an image to replace an image on hover. There is a lot of code floating around to work with image blocks. There should be a way to narrow it down to the logo and not include the majority of the header space. What happens if you just start with title-logo and leave the word header off? Does it kill the effect?

Yes it does, however if I leave it as header-title, it still works. 😕

So the code is not actually targeting the logo itself but the area the logo sits on, one header is being replaced with another so to speak. Does it work if you target header-logo and remove title?

1 minute ago, derricksrandomviews said:

So the code is not actually targeting the logo itself but the area the logo sits on, one header is being replaced with another so to speak. 

Hmm.. yes it seems like it. I see that now haha. Would you know how I would be able to find the logo's written code? 

You need to target the original image url and swap it with the second. Inspect the page, and get that. It too has a static number. Right click the header go to inspect then click the logo, the url will show up. Choose copy link address.  Instead of header-logo-title use that original url. 

14 minutes ago, derricksrandomviews said:

So the code is not actually targeting the logo itself but the area the logo sits on, one header is being replaced with another so to speak. Does it work if you target header-logo and remove title?

Actually sorry I misread this last question. When i simple input header-logo and remove title, it still acts as if the header is being replaced. 

Not surprised, anything that points to the whole block will do that. That is why I say swap image url for image url. 

Just now, derricksrandomviews said:

Not surprised, anything that points to the whole block will do that. That is why I say swap image url for image url. 

Do you mean into the line of code I posted above? Or is there a new line of code I'm meant to be adding to it? As you can see I'm a complete amateur haha..

You posted a url(https.....) for the second logo, the original one has one too. The site assigns that on its own. My instructions are how to find it and you place that in the code where you have header-logo-title. You target the actual image not the block, the same way images change when you hover over a thumbnail. 

2 minutes ago, derricksrandomviews said:

You posted a url(https.....) for the second logo, the original one has one too. The site assigns that on its own. My instructions are how to find it and you place that in the code where you have header-logo-title. You target the actual image not the block, the same way images change when you hover over a thumbnail. 

Something like this right? First is the original logo and the background image url is the second logo. 

https://static1.squarespace.com/static/5eb565960cd9d81d47e3f70a/t/5ee376a07dadaf00a0588e29/1591965346621/222222.png:hover a:after {
    content: "";
    background-image: url(https://static1.squarespace.com/static/5eb565960cd9d81d47e3f70a/t/5ee3078231781f54f188ff3c/1591936899449/22222.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    display: block;
    position: absolute;
    top: 0;
    height:149.984px; width:154px
}
 

Should be worth a try. You might need a . at the beginning of  the first line.