Dynamic logo on mouse hover?

Store Design

Topic summary

Goal: animate the site logo on mouse hover using a GIF on a Shopify store (y2kfusion.com).

Key guidance provided:

  • Confirm you have the animated GIF ready.
  • Theme-dependent solution; store likely uses the Palo Alto theme. Suggested to search theme-specific discussions. More robust handling (responsive images/JS) is advanced customization.
  • CSS-only approach: on hover, hide the static logo image and show an alternate image/GIF (e.g., via background image on the logo link) using custom CSS.
  • Template approach: upload the GIF (Settings → Files), then edit theme code (Online Store → Themes → Edit code). In header.liquid (theme header template), locate the logo and implement a hover swap. Example: an with a class (e.g., hover-logo) and CSS that swaps the image to the GIF on :hover using the asset_url filter (which outputs the URL to theme assets).

Notes:

  • “Hover” refers to the mouse-over state; “header.liquid” is the header template; “asset_url” builds asset URLs.

Status: solutions shared, but no confirmation of implementation; discussion remains open.

Summarized with AI on December 11. AI used: gpt-5.
1

Hi there,

I want to animate my logo when the mouse hovers over it, using a GIF of the logo.

Could someone give me some guidance on how to do this? Here is the link to my website: https://y2kfusion.com

Thank you in advance!

1 Like
2

@niosuFK2Y Do you have the GIF logo with you that you want to display on mouseover?

3

This varies by theme, not everyone has your exact setup try to communicate detail upfront.
Looks like Palo Alto, just search first https://community.shopify.com/search?q=Palo%20Alto%20hover%20logo
It’s made by Presidio so just search with their other theme names for possible discussions
https://themes.shopify.com/designers/page-mill-design

It be something like the following in a custom css setting
https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

.logo:hover img.logo__image { opacity: 0 !important; }
.logo:hover a.logo__image-link { background: url(https://y2kfusion.com/cdn/shop/files/y2k-fusion-logo.png?v=1751557598&width=100) no-repeat; }

replacing the image url , adjusting for sizes , or animations to fit to purpose, etc etc ad nauseum.

To do properly with responsive images, and or javascript or settings, is an advanced theme customizations.
You can reach out to me for customization services.
:speaking_head: :postbox: CLICK profile-pic on forums for options to connect.
ALWAYS include context in new communications, e.g. reference urls, posts urls, etc

5

Hi @niosuFK2Y ,
Yes, you can animate your logo on hover by swapping the static image with a GIF using a little custom code.

  1. Upload your GIF to Settings → Files and copy the file URL.
  2. Go to Online Store → Themes → Edit code.
  3. In your header file (usually header.liquid), find the logo <img> tag.
  4. Add a hover swap like this:
<img 
  src="{{ 'logo.png' | asset_url }}" 
  data-hover="{{ 'logo-animated.gif' | asset_url }}" 
  class="hover-logo"
/>

<style>
.hover-logo:hover {
    content: url({{ 'logo-animated.gif' | asset_url }});
}
</style>