Why isn't my collection image clickable when merged with text?

Store Design

Topic summary

A user applied CSS code to overlay collection titles on images, creating a visually appealing merged effect. However, this caused the images to become unclickable—only the text titles remain clickable.

CSS Code Used:

  • Positioned text absolutely with position: absolute
  • Styled with white color, 20px font size
  • Positioned at 63% from top, 10% from left

Current Issue:

  • Images lose clickability when the CSS is applied
  • Removing the code restores image clickability but separates the text from images

Goal:
Make both the image and overlaid text clickable simultaneously while maintaining the merged visual design.

The issue appears on the homepage collections section (Men, Women, Kids, Utility). The discussion remains open with no solution provided yet.

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

Hello guys,

I hope you all doing good,

I need your help please, I merged the text of my collections with the image (I love how it looks) with this code :

*.full-unstyled-link {*
*position: absolute;*
*color: white;*
*font-size: 20px;*
*top: 63%;*
*left: 10%;*
*right: 0;*
*}*

but the problem I encountered is that the image is not clickable anymore, only the title is clickable, once I remove this code the images become clickable again, but the title is not merged with the image anymore,

Can you guys help me to make the image clickable too while merged with the text?

Thank you in advance,

Here’s my website : www.giftygems.com you can see the collection in the homepage if you scroll down (Men,Women,Kids,Utility..etc)

Kind regards.

FYI : The images are clickable once I remove this code :