yes that current code please add this code
Topic summary
Users seek to implement a hover effect on product images in Shopify’s Debut theme, where a second product image appears when hovering over the first. The solution involves adding custom CSS code to theme.css (or theme.scss.liquid) and modifying the product-card-grid.liquid file.
Common implementation steps:
- Add CSS for the reveal module to theme.css
- Modify product-card-grid.liquid to include secondary image markup with specific classes
- Additional CSS may be needed to fix spacing, vendor name duplication, or mobile display issues
Frequent problems reported:
- Images appearing blank/stacked instead of switching on hover
- Duplicate product rows appearing
- Last image in gallery showing instead of second image
- Mobile devices displaying stacked images
- Missing theme.scss.liquid file in newer Debut versions
Key troubleshooting:
- Ensure both CSS and liquid file modifications are applied correctly
- Verify products have multiple images uploaded
- Check for conflicting code or apps
- Some users required personalized code adjustments for their specific theme version
The discussion remains active with ongoing troubleshooting, though several users successfully implemented the feature with guidance.
@KetanKumar Which one? There was no code in your answer
@KetanKumar i accidentally clicked it as solved but its not. I didnt see any new code to add. Can you please let me know?
1 Like
@KetanKumar I dont understand, what do i do???
this is the code i put for product-card-grid.liquid
I dont see any corrected one or what to change.
1 Like
sorry for that one i thinkkg someting is wrong if possible to add me staff and give just theme access so i will check and update code
@KetanKumar Sure, no problem!
How do i add you, with this email: bamaniyaketan.sky@gmail.com ?
yes please
@KetanKumar i already did
1 Like
thanks
i have check this code its work as well but issue generate by this app Product Filter & Search app was replace theme code so doesn’t work
Hello,
I’ve just tried so many different ways from YT tutorials and have just done your way and I’m still getting the images stacked on each other…
website link - p/w: couture123
I’m not sure if there is an app blocking the feature?
Please help, thank you
All good I have resolved this issue now. Would love to know how to make my image on my landing page zoom when hovered. It is just a ‘Text Columns with Images’ image, not a product image. Would love some more interaction with it if possible please.
1 Like
yes please show me issue
I popped my website details above if you want to have a look there or here is a screenshot - they are stagnent photos and I’d like to either have it zoom in when I hover over them (1st preference) or click on them to purchase and I can remove the buttons (that bit I know how to do haha)
1 Like
yes please try this code
- Go to Online Store->Theme->Edit code
- Asset->/theme.css ->paste below code at the bottom of the file.
.feature-row__image-wrapper .feature-row__image {
transition: all 0.9s;
}
.feature-row__image-wrapper:hover .feature-row__image {
transform: scale(1.1);
}
Thank you so much, you’re incredibly helpful.
I have one last question and then the site is done! 
I really appreciate your help.
My header logo is the same file/image on all pages, however on the product pages it comes up with a blurry background whereas the file is a transparent background. any suggestions pls?
1 Like
yes please share store url
Hi @KetanKumar Can you please help me with my Debut theme looks like the three dots from the slider are all the way to the right I am not sure why. Also how can I make the slider button background transparent?
In advance thank you so much for your help!
1 Like
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community! 
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Hello! I got this working well but is there a way to hide the second image when not hovering? I’m using an image with a transparent background as the first image and this shows what’s underneath. Here is an example page https://iamdeadly.com/collections/i-am-sin