Overlay text on Collection cards

Store Design
,

Topic summary

A user wants to modify their collection card design to overlay text directly on images rather than displaying it below.

Current state: Text appears underneath collection card images.

Desired outcome:

  • Text positioned at the bottom-left corner of the image
  • Black gradient fade from the bottom (not full opacity) to ensure text readability without overpowering the image
  • Text overlaid on the image itself

Visual references: The user provided two screenshots showing the current layout versus the target design they want to achieve.

The request remains unanswered with no solutions or guidance provided yet. This appears to be a CSS/theme customization question for a Shopify store.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

I would like to overlay the text on my collection cards instead of having it under the card.

This is what i have:

Screenshot 2024-10-24 at 11.27.41.png
Screenshot 2024-10-24 at 11.27.41.png1225×551 482 KB

This is what i am looking for:

Screenshot 2024-10-24 at 11.28.49.png
Screenshot 2024-10-24 at 11.28.49.png835×449 404 KB

I want my text to be aligned to the bottom left and instead of having a full black opacity over the image, I want it to fade out from the bottom, so that the text can be read but it doesn’t suppress the image too much.

Please help.

Thanks in advance.

2

Website link: https://8ae3b9-27.myshopify.com/