Solved

how can show second image on hover on mobile

MT27
Explorer
68 6 3

Hi in my website on desktop, it shows second image on hover when the mouse is on the product picture, but on mobile it doesn't, how can I do the same on mobile?

URL: https://matibrnd.com/

Pass: biangu

Accepted Solution (1)

BSS-Commerce
Shopify Expert
3376 447 495

This is an accepted solution.

Hi @MT27 ,

Follow these steps:
Step 1: Access Shopify Admin
Step 2: Access Online Store => Access Edit code

view - 2024-02-06T092209.562.png

Step 3: Find the base.css or global.css file

view - 2024-02-06T092232.586.png

view - 2024-02-06T092347.825.png

Insert this CSS snippet into your CSS file:

@media only screen and (max-width: 989px) {
    .card-wrapper:hover .media.media--hover-effect>img:first-child:not(:only-child) {
      opacity: 0 !important;
    }
    .card-wrapper:hover .media.media--hover-effect > img + img {
     opacity: 1 !important;
    }
} 

Hope it helps @MT27 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Reply 1 (1)

BSS-Commerce
Shopify Expert
3376 447 495

This is an accepted solution.

Hi @MT27 ,

Follow these steps:
Step 1: Access Shopify Admin
Step 2: Access Online Store => Access Edit code

view - 2024-02-06T092209.562.png

Step 3: Find the base.css or global.css file

view - 2024-02-06T092232.586.png

view - 2024-02-06T092347.825.png

Insert this CSS snippet into your CSS file:

@media only screen and (max-width: 989px) {
    .card-wrapper:hover .media.media--hover-effect>img:first-child:not(:only-child) {
      opacity: 0 !important;
    }
    .card-wrapper:hover .media.media--hover-effect > img + img {
     opacity: 1 !important;
    }
} 

Hope it helps @MT27 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development