Hover affect on the brooklyn theme

Solved
Highlighted
Trailblazer
150 4 21

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
115 12 12

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 :))

Want to get customization to your store or bug fixing quickly? Hire Me for an hour for only $20 (Or get a fixed quote)
Hire Me For
  • Store Setup
  • HTML, CSS, JS, JQuery and Liquid coding
  • Bug Fixing

Email at umairabbascs@gmail.com or WhatsApp

0 Likes
Highlighted
Trailblazer
150 4 21

hi umair,

 

thanks for replying

 

https://thetinycrate.myshopify.com/

0 Likes
Highlighted
Shopify Partner
115 12 12

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?

Want to get customization to your store or bug fixing quickly? Hire Me for an hour for only $20 (Or get a fixed quote)
Hire Me For
  • Store Setup
  • HTML, CSS, JS, JQuery and Liquid coding
  • Bug Fixing

Email at umairabbascs@gmail.com or WhatsApp

0 Likes
Highlighted
Trailblazer
150 4 21

hi umair

 

password is Jesstan21

 

thanks

 

jess

0 Likes
Highlighted
Trailblazer
150 4 21

hi umair,

 

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

 

thanks

0 Likes
Highlighted
Shopify Partner
7457 1031 2587

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
150 4 21

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. 

- Do you need to customize your landing page, product page, blog, coming soon, FAQ, about us pages? Check out PageFly - Advanced Shopify Page Builder.
0 Likes
Highlighted
Trailblazer
150 4 21

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