How can show second image on hover on mobile

[MT27]

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

[BSS-Commerce]

Hi @MT27 ,

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

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

 

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