Re: Showing Second Image on Touch/Scroll on Mobile

Reneo · ‎05-18-2023

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 · ‎05-18-2023

Hi @Reneo ,

Can you share your store url

vian_FoxEcom · ‎05-18-2023

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 · ‎05-19-2023

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

Thalia2 · ‎05-31-2024

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>