brooklyn theme: hover effect picking up wrong picture

[jtan]

hi all,

i got the hover effect working for the brooklyn theme however it is picking up the wrong picture. 

The first picture (mouse not hovering on the picture) is picking up the second picture on the product load page.

hopefully the screenshots below help to explain. 

is there a way to get the first picture to pick up the first picture on the product load page

[KetanKumar]

@jtan 

Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

[jtan]

hi ketan, 

thetinycrate.com.au

Jesstan21

[KetanKumar · Accepted solution]

@jtan 

Thanks for the details 

can you please remove below CSS first 
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;
}

After adding below 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 {
height: 100%;
}
.reveal {
    margin: 0 auto;
    position: absolute;
    width: 100%;
    top: 0;
    opacity: 0;
    transition: all 0.9s;
    z-index: 9;
}
.grid-product__wrapper:hover .reveal {
    opacity: 1;
}
.grid-product__wrapper:hover .product--wrapper {
    opacity: 0;
}

[jtan]

Hi @KetanKumar 

That worked but for some reason size of the image has decreased. 

Would you know how to fix this?

[KetanKumar · Accepted solution]

@jtan 

Thanks 

all good i have to check this issue i can see find an error (remove dynamic height yesterday i can't see right it show up )

see the attachment 

[jtan]

hi ketan,

looks like i found where i went wrong. 

thanks for the help

[KetanKumar]

@jtan 

Thanks for the update.

[jtan]

hi @KetanKumar

is there a way to disable to hover effect on mobile devices? 

thanks

jess 

[KetanKumar]

@jtan 

Thanks for again

yes, sure let me know which section do you have to remove the hover effect on mobile?