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

Retired Boards Appdev Store Design
1

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?

2

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.

3

@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
carmenrobben_0-1643966573439.png959Ă—774 61.8 KB

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

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

4

i have the same problem, you can fixed ?

5

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

6

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

7

@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

Password:shopify123

8

Hi,

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

9

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”

10

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
made4Uo_0-1659547897192.png1483Ă—497 231 KB

11

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

12

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

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

14

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

15

Hi! This solution doesn’t works. Someone could find the solution please? Thanks!

16

Hi @made4Uo this has worked for me like a charm! I applied it to the base.css code and it’s working everywhere except on the search results page. I have the "show second image when hovering enabled. It’s actually working on desktop but not on mobile. What do you suggest I could do? Thanks you very much in advance!