Slightly Enlarge Image on Hover in Footer

Store Design
, ,

Topic summary

Goal: make a footer image (used as a logo) slightly enlarge on hover on flammashop.com, and make it clickable to go to the top/home.

Hover enlarge (CSS):

  • Initial suggestion targeted .footer-logo:hover with transform: scale(1.5) and a transition.
  • After clarifying it’s an image section, a working selector was proposed: .footer-block__image-wrapper:hover with transform: scale(1.5) and transition. Add in the footer’s custom CSS field.
  • Another option: add the rule for .footer-block__image-wrapper:hover with a milder scale (1.2) in base.css. Both approaches use a CSS hover effect (transform: scale) to zoom the image.

Linking the image to “home/top”:

  • Advised to set a link for the image via the theme’s Customize settings rather than using an ID/anchor method. Exact path not detailed.
  • A later reply suggested adding code in theme.liquid above , but no code was provided, leaving this part incomplete.

Outcome/status:

  • The hover enlargement has clear CSS solutions and placement options (custom CSS in footer or base.css).
  • Making the image link to the homepage/top remains unresolved due to missing, step-by-step instructions or code.

Notes: Screenshots were shared but not essential to the solution.

Summarized with AI on January 7. AI used: gpt-5.
2

Hi bro ! You will need to change the class code of the logo. I think these codes will work.
.footer-logo:hover {
transform: scale(1.5);
transition: transform 0.3s ease;
}