Slightly Enlarge Image on Hover in Footer

Store Design
, ,
1

Hi guys, how can I slightly enlarge the picture of my logo on hover in the footer section? Website: flammashop.com

Any help is greatly appreciated!

Screenshot 2024-01-27 at 7.21.33 PM.png
Screenshot 2024-01-27 at 7.21.33 PM.png2748×988 164 KB

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;
}

3

I don’t think it’s considered my logo in terms of coding. I added an image section to the footer and then added a screenshot. I attached a picture for reference.

Screenshot 2024-01-27 at 7.32.46 PM.png
Screenshot 2024-01-27 at 7.32.46 PM.png562×752 20.5 KB

4

I don’t think it’s the same theme :slightly_smiling_face:

Screenshot_3.png
Screenshot_3.png1897×495 17.9 KB

5
6

The one you went to has one “m”

7

.footer-block__image-wrapper:hover {
transform: scale(1.5);
transition: transform 0.3s ease;
}

You can add these codes to the custom css field in the footer

8

Thanks brodie. Do you also know how to add a link to that image so that when it’s clicked you’re returned “home” aka the top of the page?

9

It can be done by defining the ID, but not this way. All you have to do is provide a link to the image in the customize field.

10

Gotcha. Where would I go to do that?

11

Hello @flammagreg :waving_hand:

In Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

.footer-block__image-wrapper:hover {
    transform: scale(1.2);
}

Hope that helps!

12

Thank you. Do you know how I can add a link to the image to take the user to the top of the home page?

13

Hi @flammagreg

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Richard | PageFly