How to make text click-through?

I've got images with text boxes on them on my site, but when I try to click the link on the image the text box gets in the way because it's in front of the image. I tried adding the same link to the text box, however there are still small gaps where clicking does nothing. Does anybody know a solution to this? Also, I'm hoping this is possible with just CSS, I'm not on a business plan. Cheers.

URL is leonprantner.com/travelup
PW is test

To resolve the layering issue on your site, apply pointer-events: none; to your text boxes in CSS, allowing clicks to pass through to the image link. Additionally, adjust the clickable area of the image by tweaking the link's padding and margin, ensuring full coverage and eliminating any non-clickable gaps.

Just a curious, I see you are using 2 text blocks over image, why don't you use 1 Text Block only?

On 1/24/2024 at 8:21 PM, numairsohail said:

 

To resolve the layering issue on your site, apply pointer-events: none; to your text boxes in CSS, allowing clicks to pass through to the image link. Additionally, adjust the clickable area of the image by tweaking the link's padding and margin, ensuring full coverage and eliminating any non-clickable gaps.

Hi numairsohail, I tried this but this just removes any pointer events inside the text box, it doens't allow me to click through to the image link.

11 hours ago, tuanphan said:

Just a curious, I see you are using 2 text blocks over image, why don't you use 1 Text Block only?

Hi tuanphan, I wanted the two lines to be closer together, putting them both in one text box sets a fixed distance between them. Maybe it's possible to adjust the gap in CSS, I just used two blocks for now.

On 1/28/2024 at 9:35 PM, leonprantner said:

Hi tuanphan, I wanted the two lines to be closer together, putting them both in one text box sets a fixed distance between them. Maybe it's possible to adjust the gap in CSS, I just used two blocks for now.

You can use 1 Text Block with this CSS code to adjust gap between 2 Heading 4

body#collection-65ae87060e949c0ab050dd84 h4 {
	margin-bottom: 40px !important;
}