hovering effect added on recepies

[INam1995]

What does this PR do?

it will add hovering effect on items
@AlfiyaSiddique Kindly merge it if there is an issue let me know
Please don't forget to add label

Fixes #46

How should this be tested?

videos is provided here for testing and reference

• Test 1
• Test 2

freecompress-20241024-1936-22.7826901.mp4

Checklist

Required

• [ x] Filled out the "How to test" section in this PR
• [x ] Read Contributing guide
• [x ] Self-reviewed my own code
• [ x] Checked for warnings, there are none
• [ x] Removed all console.logs
• [ x] The changes don't cause any responsiveness issues

[netlify]

✅ Deploy Preview for delightful-daifuku-a9f6ea ready!

Name	Link
🔨 Latest commit
🔍 Latest deploy log	https://app.netlify.com/sites/delightful-daifuku-a9f6ea/deploys/671e909afae585898f1de805
😎 Deploy Preview	https://deploy-preview-343--delightful-daifuku-a9f6ea.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.

[AlfiyaSiddique]

@INam1995 the deployment is failing due to the below issue:

Please fix it

[INam1995]

@AlfiyaSiddique could you please specify in which file it's giving error? i checked all recepie-related files, but i didn't get
So please help me by specifying the file name so that I can proceed asap!!

[INam1995]

@AlfiyaSiddique please let me know so that i can proceed asap!!

[AlfiyaSiddique]

File path: : frontend/src/Components/Cards

[INam1995]

@AlfiyaSiddique done please check it

[INam1995]

@AlfiyaSiddique If there is any issue then please let me know