Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

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

Solved

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

carmenrobben
Visitor
3 0 0

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?

Accepted Solution (1)
made4Uo
Shopify Partner
3856 717 1200

This is an 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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

View solution in original post

Replies 15 (15)

Adarsh2030
Shopify Partner
53 2 5

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.

Adarsh Tripathi
carmenrobben
Visitor
3 0 0

@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 can see if I did anything wrong, thanks again.

NICOLASNP
Visitor
3 0 0

i have the same problem, you can fixed ? 

made4Uo
Shopify Partner
3856 717 1200

This is an 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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
carmenrobben
Visitor
3 0 0

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

saadrafi
Excursionist
32 0 11

@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
Shopify Partner
3856 717 1200

Hi, 

 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
saadrafi
Excursionist
32 0 11

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
Shopify Partner
3856 717 1200

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

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
saadrafi
Excursionist
32 0 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

maximsolarza
Visitor
2 0 0

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

 

maximsolarza
Visitor
2 0 0

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
New Member
4 0 0

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

 

caviaroutfits
Visitor
1 0 0

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

arielcarvajalc
New Member
5 0 0

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!