Re: Hover on mobile

Hover on mobile

brokenyolk
Tourist
5 0 1

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

Replies 7 (7)

ES1
Shopify Partner
161 15 17

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.

- Was our response helpful? Please click Like to let us know!
- Was your question answered? If Yes, Please mark it as an Accepted Solution so that it can help other budding Entrepreneurs like yourself !!!
brokenyolk
Tourist
5 0 1

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
Shopify Partner
161 15 17

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

- Was our response helpful? Please click Like to let us know!
- Was your question answered? If Yes, Please mark it as an Accepted Solution so that it can help other budding Entrepreneurs like yourself !!!
brokenyolk
Tourist
5 0 1

tried that, same problem persists.

ES1
Shopify Partner
161 15 17

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

- Was our response helpful? Please click Like to let us know!
- Was your question answered? If Yes, Please mark it as an Accepted Solution so that it can help other budding Entrepreneurs like yourself !!!

Van_Nguyen_GSG
Shopify Partner
161 23 42

Hi,

 

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

Helping Shopify merchants build stores that convert.
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- If you still need help, feel free to reach out to me at: van@glue.sg
Cheers!
brokenyolk
Tourist
5 0 1

junehomesupply.com
SUMMER2024