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
3807 713 1129

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

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!

View solution in original post

Replies 13 (13)

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
2 0 0

i have the same problem, you can fixed ? 

made4Uo
Shopify Partner
3807 713 1129

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

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
carmenrobben
Visitor
3 0 0

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

saadrafi
Excursionist
28 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
3807 713 1129

Hi, 

 

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

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
saadrafi
Excursionist
28 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
3807 713 1129

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

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
saadrafi
Excursionist
28 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...