Skip to content

Make csa-card-hover cards clickable via stretched csa-go link - #5

Merged
apannetrat merged 1 commit into
mainfrom
card-hover-stretched-link
Oct 2, 2026
Merged

apannetrat merged 1 commit into
mainfrom
card-hover-stretched-link

Conversation

@apannetrat

Copy link
Copy Markdown
Contributor

Summary

  • Adds position: relative to .csa-card-hover to establish the stacking context
  • Adds a ::after pseudo-element on .csa-card-hover .csa-go stretched to inset: 0, making the entire card surface trigger the link on click
  • No JS required — pure CSS stretched-link pattern (same technique as Bootstrap's stretched-link)

Caveat

Any other interactive element (second link, button) placed inside a hover card will need position: relative; z-index: 1 to sit above the overlay and remain independently clickable.

Test plan

  • Click on card body (not the link text) — should follow the csa-go href
  • Click directly on the csa-go link text — should still work normally
  • Right-click on the card — browser context menu should offer "Open link in new tab"
  • Verify hover lift animation still works
  • Check on dark/black surfaces

Adds position:relative to .csa-card-hover and a ::after pseudo-element
on .csa-card-hover .csa-go that covers the full card surface, so any
click on the card follows the link. Other interactive elements inside
the card need position:relative + z-index:1 to remain clickable.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@apannetrat

Copy link
Copy Markdown
Contributor Author

@lumpster-csa I'd like your approval before merging this. I noticed that cards with the .csa-card-hover style containing a link are not clickable (except on the link itself) despite the cursor change. It felt wrong so I tried to fix this.

@lumpster-csa

Copy link
Copy Markdown
Collaborator

@apannetrat good catch and makes perfect sense to me for the entire card to be clickable.

@apannetrat
apannetrat merged commit f467623 into main Oct 2, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants