Showing Second Image on Touch/Scroll on Mobile

Reneo
Visitor
2 0 1

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

Replies 4 (4)

zaczee
Globetrotter
848 46 42

Hi @Reneo ,

 

Can you share your store url

 

vian_FoxEcom
Shopify Partner
104 6 21

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 🙂 

Find my answer helpful? Give it a like :]
Try Foxify now - #1 Conversion-focused page builder.
Use FoxKit free - All-in-one Sales Boost.
FoxEcom smart solutions impact sales, costs, and profit all at once.
Reneo
Visitor
2 0 1

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

Thalia2
Visitor
1 0 0

Try this:

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Effect Example</title>
<style>
: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;
}
</style>
</head>
<body>
<div class="card-wrapper">
<div class="media media--hover-effect">
<img src="image1.jpg" alt="First Image">
<img src="image2.jpg" alt="Second Image">
</div>
</div>
</body>
</html>