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

[carmenrobben]

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?

[Adarsh2030]

Hello @carmenrobben 

Hope you are doing well !

yes please add this code and try this 

1. Go to Online Store->Theme->Edit code
2. 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 {
opacity: 1;
transition: transform var(--duration-long) ease;
transform: scale(1.03);
}
}

Thanks and let me update if it works.

[carmenrobben]

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

The website (with the active code snippet included) is https://deruva.nl/ .

Maybe you can see if I did anything wrong, thanks again.

[NICOLASNP]

i have the same problem, you can fixed ? 

[made4Uo · Accepted solution]

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 > img:only-child,
  .card-wrapper .media.media--hover-effect > img:only-child {
    transition: transform var(--duration-long) ease;
  }

  .card:hover .media.media--hover-effect > img:first-child:only-child,
  .card-wrapper:hover .media.media--hover-effect > img:first-child:only-child {
    transform: scale(1.03);
  }

  .card-wrapper:hover
    .media.media--hover-effect
    > img:first-child:not(:only-child) {
    opacity: 0;
  }

  .card-wrapper:hover .media.media--hover-effect > img + img {
    opacity: 1;
    transition: transform var(--duration-long) ease;
    transform: scale(1.03);
  }
}

 Mark as solution if it helps. Thank you

[carmenrobben]

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

[saadrafi]

@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 

thoughtbox-pk.myshopify.com

Password:shopify123

[made4Uo]

Hi, 

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

[saadrafi]

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"

[made4Uo]

Oh @saadrafi,

Make sure you have the hover activated. See image below and check the settings you have in the theme editor

[saadrafi]

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

[maximsolarza]

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

[maximsolarza]

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

[TylerT23]

Is there a way to make this less sensitive? Maybe hover after duration? I tried after duration but didnt work...