- This topic has 15 replies, 5 voices, and was last updated 6 years, 5 months ago by
Leo.
-
AuthorPosts
-
March 3, 2015 at 9:41 am #82206
Sophia Monago
Is there a way to change logo image when hovering just like title hover and link hover.
March 3, 2015 at 10:21 am #82225Tom
Lead DeveloperLead DeveloperHi Sophia,
Are you wanting to change the logo image to a different image on hover?
It’s possible, but would involve using GP Hooks.
I can provide some code if you’re interested 🙂
March 5, 2015 at 4:59 pm #83159Sophia
Yes!. I would love that. :). Thank you!.
March 5, 2015 at 11:24 pm #83213Tom
Lead DeveloperLead DeveloperSo basically, you would remove the logo set in the Customizer.
Then, in the “Inside Header Content” area of GP Hooks, you would add something like this:
<div class="site-logo"> <a href="URL TO CLICK THROUGH TO" class="hover-logos"> <img src="URL TO YOUR LOGO" alt="" class="logo-regular-state" /> <img src="URL TO YOUR HOVER LOGO" alt="" class="logo-hover-state" /> </a> </div>
Then you would add this CSS:
.logo-hover-state { display: none; } .site-logo:hover .logo-regular-state { display: none; } .site-logo:hover .logo-hover-state { display: block; }
In theory, that should do it. Untested, so it may need some tweaking 🙂
-
This reply was modified 9 years, 1 month ago by
Tom.
March 17, 2016 at 12:08 pm #179931Mo
Hi Tom,
After a bit of searching here, I found that Sophia asked the question I’d been seeking an answwer to.Didn’t see a GP Hooks area named “Inside Header Content” so I took a guess and added the HTML to Before Header Content.
It worked perfectly for initial placement of the regular state, however, on the mouseover, the hover-state image appears aligned below the regular state image, shifted exactly the height of the image.
In this case 200px.Tried applying different position elements but the only thing that was partially successful was using a negative margin-top value.
There’s probably a much more elegant way to achieve the desired result.
I’m just happy to have found the solution to the issue of getting the header images to appear.
That being, how to overide the Customizer.Now it’s only a matter of getting them to appear in perfect alignment.
Mobile displays the opposite results.
The hover state image appears about half the height of the regular state image but above it.
If it’s of any use, the images are both w=600px x h=200px.
Your IP has been whitelisted in Wordfence after one of your intial visits was blocked.
Thanks,
MoMarch 17, 2016 at 2:31 pm #179969Mo
Well, cleaaring the cache must’ve been delayed because the regular state image and hover state image now line up in Firefox, Chrome and IE.
Weird.
Still a shift in mobile (media max-width: 768px) with the hover state shifting about 60px or so above the regular state.
Just started working on this today so the logo size isn’t set at 600×200.
May go to 450×150.Might end up making the logo into a rollover.
Haven’t decided.March 17, 2016 at 2:33 pm #179970Mo
You are aware of this.
The smaller the screen the worse the shift on the hover state image.March 17, 2016 at 10:33 pm #180017Tom
Lead DeveloperLead DeveloperHi Mo,
You’re missing the logo-regular-state class on the first image:
<img src="URL TO YOUR LOGO" alt="" class="logo-regular-state" />
Let me know if that fixes it or not 🙂
March 18, 2016 at 3:15 am #180046Mo
As usual, you’ve resolved the issue.
Works as it should in mobile as well.Thank you.
March 18, 2016 at 8:34 am #180085Tom
Lead DeveloperLead DeveloperYou’re welcome 🙂
March 18, 2016 at 9:36 am #180111Mo
One odd bit of behavior now and it only seems to occur in Firefox.
I disabled all addons just to make certain they weren’t the cause.
Made no difference.When hovering the cursor over the main navbar, on any parent button, occassionally the hover state logo in the header will appear directly below the regular state logo.
Does not happen every time.
If you move the cursor between the Homepage button and the header image area repeatedly this eventually triggers the behavior.
There have also been instances where I taken a break from the page and upon returning the both the regular state and hover state logos are fully expanded one on top of the other.
Refreshing the page returns it to normal.
Cannot duplicate it in Chrome or IE.
Firefox quirk?Your IP has been whitelisted in the “Under Construction” plugin.
Let me know if you can’t access it.Thanks
March 18, 2016 at 7:56 pm #180222Tom
Lead DeveloperLead DeveloperHmm, try the updated CSS above: https://generatepress.com/forums/topic/logo-hover/#post-83213
March 19, 2016 at 8:55 am #180278Mo
Where you indicate to place the code in “Inside Header Content”.
I don’t see that section in GP Hooks.I’ve placed the HTML is placed in “Before Header Content”.
It actually doesn’t matter where the block of code is placed as it was tried in the 4 header sections
The same odd behavior occurred.What seems to have worked is a lot of trial and error in the CSS.
I found the class in the GP parent theme and added this to the Child:.site-logo { display: block; } .site-logo:hover { display: inline-block; }
When the display properties were both inline-block, the hover state logo would occasionally appear below the regular state logo by the 200px height of the regular state image.
Making the display values different stopped it.
This might be considered a rough hack, as my CSS knowledge is basic.Since adding it, I’ve been trying to “break” the logo but it seems atable.
Works in the 3 browsers and looks fine in mobile.Perhaps you’ll know why this is working.
March 19, 2016 at 10:29 pm #180379Tom
Lead DeveloperLead DeveloperNot really sure why it’s working, but I wouldn’t call it hacky – that’s great that it’s working 🙂
November 14, 2018 at 5:45 am #727003Rui
Hi!
How can I make a “soft” logo zoom out (on hover), like the logo at left on this site: http://www.planetary.org/ ?
-
This reply was modified 9 years, 1 month ago by
-
AuthorPosts
- The topic ‘Logo Hover’ is closed to new replies.