It doesn’t work because you’re removing pointer events from the image:
While the clickable element is the <a> tag that wraps around both the image and the title and looks like this:
Clicking anywhere in that area will take you to /c/landscapes
The cleanest way to achieve the desired result is to move the image outside of the <a> tag. so you go from this:
to this:
Then the image will not be clickable:
You achieve that by overriding the template
Try something like this in the </head> section of your active theme:
<script type="text/x-handlebars" data-template-name="components/category-title-link">
{{category-title-before category=category}}
<a class="category-title-link" href={{category.url}}>
<div class="category-text-title">
{{#if category.read_restricted}}
{{d-icon 'lock'}}
{{/if}}
<span class="category-name">{{dir-span category.name}}</span>
</div>
</a>
{{#if category.uploaded_logo.url}}
<div>{{cdn-img src=category.uploaded_logo.url class="category-logo"}}</div>
{{/if}}
</script>
Do note that since this is a template override, you’d need to update it if any changes are made to the template in Discourse so that you don’t miss out on any newly added features.