Hi, your information has been extremely helpful! 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
-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; }