Showing Second Image on Touch/Scroll on Mobile

[Reneo]

Hello,

How can I enable the display of the second product image on mobile when a user interacts with the product, such as by scrolling or touching? Currently, the second images are shown on hover on desktop, but there is no response when touching on mobile devices.

Theme is dawn.

I tried this, it doesn’t work:

.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);
}

Example: https://lialay.com/collections/rings

[zaczee]

Hi @Reneo ,

Can you share your store url

[vian_FoxEcom]

Hi @Reneo

You can try adding this CSS code into the file assets/component-card.css like in this image

.card-wrapper:hover .media.media--hover-effect > img + img {
  opacity: 1 !important;
  transition: transform var(--duration-long) ease !important;
  transform: scale(1.03) !important;
}

Hope it helps! Cheers

[Reneo]

Hi, thanks for the response. I’ve already tried this and it doesn’t work, unfortunately.

[Thalia2]

Try this:

Hover Effect Example :root { --duration-long: 0.3s; /* Define the duration for the transition */ }

.card-wrapper:hover .media.media–hover-effect > img + img {
opacity: 1 !important;
transition: transform var(–duration-long) ease !important;
transform: scale(1.03) !important;
}