My rolleover image isnt the same size

[TBS2023]

Hello

I have set up 'reveal 2nd image' on scroll

However - the first image still appears behind and the 2nd image doesn't seem to be the same size

I must have done something to the code without realizing.

https://thebodyshop.com.lb/

dosawr

[sagarnabhoya]

Hi, i just Check Your Store. 
👉 This is Sagar From Shopifywale.

Hi, @TBS2023 
Follow the Below Steps to Solve the Issue
Step 1: Online Stores > Themes > Edit code.
Step 2: Choose File Theme.css under Assests Folder.
Step 3:  Find and Update Below style to top: 0 and bottom : 0 and hit Save.

.grid-product__secondary-image {
     top: 12px !important; 
     bottom: 12px !important; 
}

Hope this solution works for you. 😊

[ZestardTech]

Hi @TBS2023 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.css and paste this at the bottom of the file:

.grid-product__secondary-image {
top: 0 !important;
height: 100%;
}

[Rahul_dhiman]

Hello @TBS2023 
Go to online store ---------> themes --------------> actions ------> edit code-------> theme.css
and replace this code.

.grid-product__image-mask {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
}

with this code

.grid-product__image-mask {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

adn the result will be 

and let me know if this was helpful
Thanks 

[TBS2023]

None of these solutions are working!

[Rahul_dhiman]

Please check your inbox.

[ZestardTech · Accepted solution]

Hi @TBS2023 

1. In your Shopify Admin go to online store > themes > actions > edit code

2. Find layout > theme.liquid and paste this at the bottom of the file:

<style>
.grid-product__secondary-image {
top: 0 !important;
height: 100%;
}
</style>