Hover on mobile

[brokenyolk]

I found some very helpful info on a previous thread, I tried this on my Broadcast theme and it works perfectly on mobile. However, it created an issue on desktop, here is what is happening open my Shopify website with the Broadcast theme on the collection page:

-product photo is image 1 (default)
-hover with cursor and image 2 is displayed
-remove cursor and image 1 is displayed
-hover again over the same image and no image is displayed (blank white)

Also important to note that it works perfectly on mobile, this only happens on desktop. This problem only started after I applied the following css code to enable the mobile hover:

body main .double__image .product-item__bg__under, body main .product-item--overlay-text .product-item__bg__under { opacity: 0; display: block!important; visibility: visible!important; } body main .double__image:hover .product-item__bg__under, body main .product-item--overlay-text:hover .product-item__bg__under { opacity: 1; display: block!important; visibility: visible!important; }

[ES1]

Hi @brokenyolk 

Please try using the below code instead of yours:

/* Ensure the product image hover works on both mobile and desktop */
body main .double__image .product-item__bg__under, 
body main .product-item--overlay-text .product-item__bg__under {
    opacity: 0;
    display: block !important;
    visibility: hidden !important; /* Change visibility to hidden */
}

body main .double__image:hover .product-item__bg__under, 
body main .product-item--overlay-text:hover .product-item__bg__under {
    opacity: 1;
    visibility: visible !important; /* Ensure visibility is set to visible on hover */
}

Hope this helps.

[brokenyolk]

Tried that, works on mobile but on desktop it now shows the blank square on the first hover. To be clear, this is happening on the collection page.

[ES1]

Hi @brokenyolk ,

Ok, lets try a different approach, please use the below code:

/* Ensure the product image hover works on both mobile and desktop */
body main .double__image .product-item__bg__under, 
body main .product-item--overlay-text .product-item__bg__under {
    opacity: 0;
    display: block !important;
    visibility: hidden !important; /* Change visibility to hidden */
    transition: opacity 0.3s ease-in-out; /* Add transition for smooth effect */
}

body main .double__image:hover .product-item__bg__under, 
body main .product-item--overlay-text:hover .product-item__bg__under {
    opacity: 1;
    visibility: visible !important; /* Ensure visibility is set to visible on hover */
    transition: opacity 0.3s ease-in-out; /* Add transition for smooth effect */
}

If the problem persists, it might be worth checking if there are any JavaScript conflicts or additional CSS rules that could be affecting the hover behavior. You can also try clearing your browser cache or testing in an incognito window to ensure there are no cached styles causing the issue.

Hope this helps

[brokenyolk]

tried that, same problem persists.

[ES1]

Hi @brokenyolk ,

In that case you may want to hire a Shopify partner who can log in and fix the code for you as without access at times it becomes difficult to guide someone.

Thanks

[Van_Nguyen_GSG]

Hi,

Would you mind sharing your store URL & password (if any)? 

[brokenyolk]

junehomesupply.com
SUMMER2024