Slightly Enlarge Image on Hover in Footer

[flammagreg]

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!

[acidareci]

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

[flammagreg]

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.

[acidareci]

I don't think it's the same theme 🙂

[flammagreg]

Flammashop.com

[flammagreg]

The one you went to has one "m"

[acidareci]

.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

[flammagreg]

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?

[acidareci]

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.

[flammagreg]

Gotcha. Where would I go to do that?

[ZenoPageBuilder]

Hello @flammagreg 👋

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!

[flammagreg]

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?

[PageFly-Richard]

Hi @flammagreg 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> 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 </head>

<style>
.footer-block__image-wrapper:hover {
    transform: scale(1.5) !important;
}
</style>

Hope this can help you solve the issue

Best regards,

Richard | PageFly