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…

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 …

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

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; } …

Showing Second Image on Touch/Scroll on Mobile

Shopify Discussion

zaczee May 18, 2023, 8:37am 2

Hi @Reneo ,

Can you share your store url

Topic		Replies	Views
Show second image on hover ( DAWN Theme ) Store Design	16	223	June 23, 2023
Dawn Theme ; How To Get Second Image On Hover For Mobile Store Design	15	258	September 27, 2024
How to make images hover while scrolling on mobile? Technical Q&A optimization , migration , sales-channels , javascript , seo , css , third-party-theme , shopify-theme	0	27	July 26, 2023
How can show second image on hover on mobile Store Design design , customizations , css	1	174	February 6, 2024
How to fix persistent second image hover on mobile? Shopify Discussion troubleshooting	0	23	July 25, 2023

Showing Second Image on Touch/Scroll on Mobile

Related topics