chapochapo
-
Content Count
9 -
Joined
-
Last visited
-
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;
-
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..
-
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.
-
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?
-
Yes it does, however if I leave it as header-title, it still works. 😕
-
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; ba
-
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%; }
-
haha thanks, please let me know!
-
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