Skip to content

fixed-protocol-image-cropping-on-hover #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aryanraj2005-me wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fixed-protocol-image-cropping-on-hover #22

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions components/card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@ const Card: React.FC<Props> = ({ index, image, title, description, link }) => {
<Link href={link}>
<div
key={index}
className="group relative flex h-auto flex-col justify-evenly rounded-lg border border-zinc-200 p-6 shadow-xl"
className="group relative flex h-auto flex-col justify-evenly rounded-lg border border-zinc-200 p-6 shadow-xl overflow-visible"
Copy link

@coderabbitai coderabbitai bot Dec 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Overflow-visible may cause layout issues and break visual design.

Adding overflow-visible to the card container allows content to extend beyond the border, shadow, and rounded corners. This can cause several problems:

  • Visual inconsistency: Overflowing content extends past the card's visual boundaries (border and shadow), breaking the intended design containment.
  • Adjacent card overlap: In a grid layout, scaled images will overlap neighboring cards without proper z-index management.
  • Lost clickable area: Overflowing portions may not trigger the Link wrapper correctly.

Consider these alternative approaches:

Solution 1 (Recommended): Keep overflow-hidden and adjust the scale effect

-        className="group relative flex h-auto flex-col justify-evenly rounded-lg border border-zinc-200 p-6 shadow-xl overflow-visible"
+        className="group relative flex h-auto flex-col justify-evenly rounded-lg border border-zinc-200 p-6 shadow-xl overflow-hidden transition-all duration-500 hover:shadow-2xl hover:z-10"

Then scale down the image initially so hover brings it to 100%:

-            className="h-64 w-full object-contain transition duration-500 group-hover:scale-105"
+            className="h-64 w-full object-contain transition duration-500 scale-95 group-hover:scale-100"

Solution 2: Add z-index management if overflow is necessary

-        className="group relative flex h-auto flex-col justify-evenly rounded-lg border border-zinc-200 p-6 shadow-xl overflow-visible"
+        className="group relative flex h-auto flex-col justify-evenly rounded-lg border border-zinc-200 p-6 shadow-xl overflow-visible hover:z-10"

However, this still breaks the visual design boundaries and requires careful grid spacing.

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In components/card.tsx around line 17, the card container uses overflow-visible
which lets child content bleed past borders/shadows and cause layout/interaction
issues; change overflow-visible to overflow-hidden to contain visuals, then
adjust the image scaling behavior so hover scales from a slightly smaller base
(e.g., set the image to scale-95 normally and scale-100 on hover) so it doesn't
overflow when animating; if overflow must be preserved, instead keep
overflow-visible but add explicit z-index to the hovered element and increase
grid spacing to prevent overlap, though the preferred fix is replacing
overflow-visible with overflow-hidden and tweaking the image scale transition.

>
<div className="relative h-fit overflow-hidden rounded-md">
<div className="relative h-fit overflow-visible rounded-md">
<Image
src={image}
alt="Protocol Logo"
Expand Down