Hover affect on the brooklyn theme

Solved
Highlighted
Trailblazer
158 4 22

hi all,

 

Has anyone been able to work out how to get the hover affect (picture changes when you hover over a product picture) to work on the brooklyn theme. 

 

I have been reading all the other pages and also this guide but doesn't seem to work on my store

https://community.shopify.com/c/Shopify-Design/Collection-Add-a-hover-effect-to-product-images-on-yo...

 

The best i could get was the same image duplicating below each other. 

 

any help would be greatly appreciated

 

 

0 Likes
Highlighted
Shopify Partner
443 45 65

Hi @jtan,

You can do so by adding custom CSS properties like transitions, animations, transform, etc. Include a link to your store and I'll post the code here.

 

Let me know if you need any other help. Thanks

Cheers :))

If helpful, please Like and Accept Solution
Want to hire me?
Contact Me At
WhatsApp or email me at umairabbascs@gamil.com
Hire me for 1) Theme coding 2) PSD to Shopify 3) Store optimization 4) SEO 5) Store setup 6) and more!
0 Likes
Highlighted
Trailblazer
158 4 22

hi umair,

 

thanks for replying

 

https://thetinycrate.myshopify.com/

0 Likes
Highlighted
Shopify Partner
443 45 65

Welcome, @jtan,

But I can't see your store because It's in maintenance mode right now and asking for a password to view. Can you please disable maintenance mode or give me the view password?

If helpful, please Like and Accept Solution
Want to hire me?
Contact Me At
WhatsApp or email me at umairabbascs@gamil.com
Hire me for 1) Theme coding 2) PSD to Shopify 3) Store optimization 4) SEO 5) Store setup 6) and more!
0 Likes
Highlighted
Trailblazer
158 4 22

hi umair

 

password is Jesstan21

 

thanks

 

jess

0 Likes
Trailblazer
158 4 22

hi umair,

 

wondering if you were able to find a solution for the hover affect?

 

thanks

0 Likes
Highlighted
Shopify Partner
8741 1159 3070

This is an accepted solution.

@jtan 

Please added this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.product--wrapper {
    margin: 0 auto;
    position: absolute;
    width: 100%;
    top: 0;
    opacity: 0;
    transition: all 0.9s;
}
.grid-product__wrapper:hover .product--wrapper {
    opacity: 1;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Trailblazer
158 4 22

This is an accepted solution.

thanks alot ketan. 

0 Likes
Highlighted

Hi @jtan,

 

 There are many pre-made templates for product pages with a hover effect for images. If you use these templates, there's no need to use custom code to create one.

 

This one is an example: demo.pagefly.io/products/hoop-earrings

 

It's a PageFly template. You can adjust the layout and style.

 

Basically, if you need just 1 product page template, it's free. You can assign the template to all products in your store. 

PageFly - Advanced Shopify Page Builder.
- PageFly Page Builder: Website | Facebook | LinkedIn | Group | Youtube
- [Tutorial] Get more tips on using PageFly to soar sales this season
- [Master Guides]: Get Your Shopify Store Ready for Black Friday
0 Likes
Highlighted
Trailblazer
158 4 22

Hi Ketan, 

 

WIth the hover effect it looks like the last image is being shown without the mouse hovering over the product. 

Would you know how to make the first picture be the picture that is shown when the mouse is not hovering over the product

 

thanks

 

jess

1 Like