Add "Pop-Out" Hover Effect to Card Component File: gallery.jsx

We want to enhance the user experience in the gallery by adding an interactive hover effect to the cards. When a user hovers over a gallery card, the image (or the card itself) should appear to "pop out" from the grid.

This effect should make the card feel more responsive and engaging.

Desired Behavior:

On Hover: When the mouse pointer hovers over a single gallery card:

The card (or just its image) should smoothly scale up (e.g., transform: scale(1.05)).

The z-index of the hovered card should be increased (e.g., z-index: 10) so it appears "on top" of its neighboring cards, creating a 3D "pop" effect.

On Hover Out: When the mouse leaves the card, it should smoothly transition back to its original size and z-index.

Transition: The effect must be smooth. Please use a CSS transition on the transform and z-index properties (e.g., transition: all 0.3s ease-in-out;).

Acceptance Criteria:

Hovering a card scales it up slightly.

The hovered card's z-index is temporarily raised.

The animation is smooth and not jittery.

The layout of other cards is not permanently affected.