How can I enable second image hover on mobile product cards?

Store Design
,

Topic summary

Users seek to enable second-image hover effects on mobile product cards across various Shopify themes, as the feature typically works only on desktop by default.

Primary Solution Approach:

  • Most fixes involve adding custom CSS code to theme files (commonly Assets/base.css, Assets/component-card.css, or Layout/theme.liquid)
  • Code targets .card-wrapper:hover and .media--hover-effect classes to control image opacity on touch/hover events
  • Implementation varies significantly by theme (Dawn, Broadcast, Prestige, Impact, Sense, Flex, Pipeline, Trade, Sleek, etc.)

Common Challenges:

  • Mobile requires touch-and-hold rather than simple hover, sometimes redirecting to product pages instead
  • Second image may remain visible after touch ends instead of reverting to first image
  • Solutions are theme-specific; code working for Dawn may fail on other themes
  • Some themes lack standard file structures (e.g., missing component-card.css)

Key Contributor:
User EBOOST provides most solutions, offering customized CSS/JavaScript snippets for different themes and troubleshooting implementation issues.

Status:
Partially resolved for many users, though mobile behavior remains imperfect (requiring long-press, not reverting images, or conflicting with navigation). Some themes still lack working solutions.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
69

Hi,

If you don’t want touch on image to redirect to PDP after that you can use code below to replace the code above that I suggested.

body .card-wrapper:hover .media.media--hover-effect>img+img {
    opacity: 1;
    transition: transform var(--duration-long) ease;
    transform: scale(1.03);
} 
body .card-wrapper:hover .media.media--hover-effect>img:first-child:not(:only-child) {
    opacity: 0;
}
@media(max-width: 749px){
  .card--standard > .card__content .card__information {
    position: relative;
  }
  .card--standard .card__inner .card__media + .card__content {
    display: none;
  }
}