daabChingrii/website

Implement Animated Hover Card Effect

開放

#14 建立於 2024年10月31日

 (0 則留言) (0 個反應) (1 位負責人)TypeScript (4 個分叉)auto 404
Hacktoberfestgood first issuehacktoberfest-acceptedhelp wanted

倉庫指標

星標
 (2 顆星)
PR 合併指標
 (PR 指標待抓取)

描述

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.

Labels

  • Hacktoberfest, enhancement, good first issue

貢獻者指南