I have the box ticked for Showing the Second Image when hovering, but it only works on Desktop. How can I get this to work on mobile view?

Hi @NICOLASNP and @Adarsh2030 Try this instead. Go to your code editor, and open the Asset folder. Find the “component-card.css” file and add the code at the very bottom. This is for max-width 481px which applies to mobile. @media screen and (max-width: 481px) { .card .media.media--hover-effect >…

Hello @carmenrobben Hope you are doing well ! yes please add this code and try this Go to Online Store->Theme->Edit code Asset->/component-card.css ->paste below code at the bottom of the file. @media screen and (min-width: 320px) { .card-wrapper: hover .media. media–hover-effect>img+img { op…

@Adarsh2030 Hi Adarsh, Thank you for your reply! I appreciate it. Unfortunately the code snippet is not working. The code with the snippet included looks like following: [carmenrobben_0-1643966573439.png] The website (with the active code snippet included) is https://deruva.nl/ . Maybe you ca…

i have the same problem, you can fixed ?

It works! Thank you so much. I really appreciate it. Have a great day.

@made4Uo I did this, the hover effect is only working in “You may also like” under the product page. its not working in collections or featured collection section. Please view my website from mobile and help me [image] thoughtbox bringing you custom, handmade gifts that bring new meanin…

Hi, This should work since they share the same code. Please please the said code in the base.css instead

hello, i tried writing it in base.css as well but no result. https://www.youtube.com/shorts/2QX_KsVFjMA look at the video, its working in “you may also like”

Oh @saadrafi , Make sure you have the hover activated. See image below and check the settings you have in the theme editor [made4Uo_0-1659547897192.png]

Yes i have enabled that option. please look at this video! please!! i have been stuck with this error since 2 days its working everywhere except the collection page i have added it in base.css and component-card.css [hover error on collection page]

hello, did u end up fixing this? I am having the same issue

Dawn Theme ; How To Get Second Image On Hover For Mobile

Retired Boards Appdev Store Design

maximsolarza December 15, 2022, 8:09pm 13

i added this code in base.css but it is only working for the product recommendations and not on all products including the ones on the landing page and collections pages

how to fix this, i want all products on mobile to have this effect

Topic		Replies	Views
Show second image on hover ( DAWN Theme ) Store Design	16	223	June 23, 2023
Showing Second Image on Touch/Scroll on Mobile Shopify Discussion troubleshooting	4	69	May 31, 2024
How can show second image on hover on mobile Store Design design , customizations , css	1	172	February 6, 2024
How to show second image on hover for mobile on Flex theme 3.0.0? Store Design design , collection-page , third-party-themes , shopify-themes	5	94	March 9, 2023
How to code hover image on mobile for Sleek theme Store Design css , shopify-themes , troubleshooting	5	102	February 16, 2025

Dawn Theme ; How To Get Second Image On Hover For Mobile

Related topics