daabChingrii / daabChingrii/website

Implement Animated Hover Card Effect

Open
#14 0 comments 0 reactions 1 assignee Claimed by @amaan-bhati View on GitHub
good first issue Hacktoberfest hacktoberfest-accepted help wanted
Dominant language
TypeScript
Stars
2
Forks
4
PR merge metrics
No merged PRs in 30d

Description

### Description
Add a simple animated hover card effect to the website. The effect should scale the card and add a shadow on hover, creating a visually appealing interaction for users.

### Requirements
- **Card Design**: Create cards that can be used for various content, such as features, testimonials, or team members.
- **Hover Effect**:
- On hover, the card should:
- Scale up slightly (e.g., 1.05 times the original size).
- Add a subtle shadow for depth.
- **Transitions**: Ensure the hover effect has smooth transitions for both scaling and shadow changes.
- **Responsive Design**: The cards should be responsive and maintain their layout on different screen sizes.

### Additional Notes
- Use Tailwind CSS to implement the card design and animations.
- Refer to the Aeternity UI for inspiration on the hover effect: [Aeternity Card Hover Effect](https://ui.aceternity.com/components/card-hover-effect).

### Labels
- `Hacktoberfest`, `enhancement`, `good first issue`

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.