How to code hover image on mobile for Sleek theme

[Adelina888]

I have a hover over image to a secondary image on the collection page which works on desktop with a mouse cursor. But can anyone help me with the coding for mobile so that I can hover over the product image on the collection images on the homepage.

My website is www.healsi.com.au

Thank you

[mohan610]

Hi @Adelina888 

Add this code to the theme.css file
@media screen and (max-width: 768px){
.product-card__wrapper:hover .product-card__image-wrapper .product-card__image--second {
opacity: 1;
visibility: visible;
transform: scale3d(1, 1, 1);
}
.product-card__wrapper:hover .product-card__image-wrapper:not(.product-card__image-wrapper--main-only) .product-card__image--main {
opacity: 0;
}
}

Please feel free to contact me if you are still facing an issue. If you want I can add settings for enable/disable this functionality

[Adelina888]

Hello @mohan610 thank you for your assistance. 

This semi worked. So I started to see a blank white square while hovering but the image doesn't appear. It is a GIF as the second image. 

Thank you. 

[mohan610]

Hi @Adelina888 
Please Update this code .

@media screen and (max-width: 768px){
.product-card__wrapper:hover .product-card__image-wrapper .product-card__image--second {
opacity: 1;
visibility: visible;
transform: scale3d(1, 1, 1);
}
.product-card__wrapper:hover .product-card__image-wrapper:not(.product-card__image-wrapper--main-only) .product-card__image--main {
opacity: 0;
}
.media-wrapper.product-card__image.hidden.md\:block{
display: block;
}
}

[Adelina888]

Hello! Thank you so much 🙂 This worked !! 

[LizHoang]

Hi @Adelina888, thanks for reaching out.

I have checked your request and would like to inform you that the hover effect you’re using on the desktop relies on a mouse cursor, which isn't available on mobile devices since interactions there happen through taps and swipes. 

I hope my information is helpful to you.

Liz