How to code hover image on mobile for Sleek theme

Store Design
, ,
1

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

2

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

3

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

4

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.

5

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

Hello! Thank you so much :slightly_smiling_face: This worked !!