How can I make product text appear when hovering over product image?

[ShootsDraws]

Hi,

I would like my product collections to display as images only, until you hover over them - revealing the product title and price in the centre of the image. In order for the text to be legible, I also need a white fill (75% opacity) to overlay the image.  See https://www.palaceskateboards.com/ for reference.

Finally, I would like to limit this hover effect to desktop only - mob products should display as normal.

Preview link to draft theme: https://2rkk8y02cvehcwwz-65019576489.shopifypreview.com

Thanks for any help with this.

[ShootsDraws]

Hi @kaiyaa 

Yeah, that's right. I would like the hover to be active on all collection grid sections across the website - but only for desktop (not mob). Here's an example of how I would like it to look. Thanks!

[ShootsDraws]

Thanks @kaiyaa that did the trick!

I have one issue though - when hovering over products that feature two or more images, both images are visible/overlap (see example below). I don't mind the second image displaying in place of the first one upon hover, but the first image shouldn't be visible at the same time. If you are able to help me fix this, that would be great. Thank you!

Here's another preview link if needed: https://5lcdpsof7emfa1io-65019576489.shopifypreview.com

[ShootsDraws]

Thanks for your help! 🙂