Enhance Card Interaction: Auto-Flip on Hover

[neeru24]

fixes: #4519

This pull request aims to improve the user experience of the card elements by implementing an automatic flip on hover. Previously, users were required to manually click on the card to reveal its back side. This change eliminates the need for explicit user action, making the interaction more intuitive and engaging.

Kindly merge it @abhi03ruchi with level 2 if possible.
Thank you!!

Changes Implemented:

1. Hover Effect:

• Added a hover effect to card elements.
• When the mouse hovers over a card, the inner content rotates 180 degrees on its Y-axis.
• This creates a flip animation, revealing the back side of the card.

2. Smooth Transition:

• Applied a 0.6-second transition to the rotation effect.
• This ensures a smooth and gradual flip animation.

Output:

Recording.2024-11-03.213612.mp4

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
swapreads	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 3, 2024 4:04pm

[github-actions]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our CONTRIBUTING.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[netlify]

✅ Deploy Preview for swapreadsconnect ready!

Name	Link
🔨 Latest commit	0e0fb93
🔍 Latest deploy log	https://app.netlify.com/sites/swapreadsconnect/deploys/67279f00b6315e0008f9d21a
😎 Deploy Preview	https://deploy-preview-4520--swapreadsconnect.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.