Slightly Enlarge Image on Hover in Footer

Slightly Enlarge Image on Hover in Footer

flammagreg
Trailblazer
276 0 39

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

Replies 12 (12)

acidareci
Shopify Partner
9 0 0

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
Trailblazer
276 0 39

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

 

acidareci
Shopify Partner
9 0 0

 

I don't think it's the same theme 🙂Screenshot_3.png

flammagreg
Trailblazer
276 0 39

Flammashop.com

flammagreg
Trailblazer
276 0 39

The one you went to has one "m"

acidareci
Shopify Partner
9 0 0

.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
Trailblazer
276 0 39

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
Shopify Partner
9 0 0

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
Trailblazer
276 0 39

Gotcha. Where would I go to do that?

ZenoPageBuilder
Shopify Partner
1052 203 221

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!

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
flammagreg
Trailblazer
276 0 39

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
Shopify Partner
4439 1016 1669

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.