fix hover in empowering young learners section

[Raj2raaz]

Description:

This PR resolves issue #266 by correcting the hover behaviour of the overlay cards in the mission section. Previously, the cards scaled beyond the bounds of the image container, creating visual overflow and layout inconsistency. With this enhancement, the hover effect is contained within the image container, preserving design integrity across screen sizes.

Changes Made:

Adjusted Hover Scaling Behaviour:

• Applied transform-origin (origin-top-left and origin-bottom-right) to the top-left and bottom-right cards respectively.
• Ensured parent image container has overflow-hidden to prevent visual overflow.
• Retained the scale effect (scale-105) but restricted it to animate inward.
• This change preserves the visual interaction without breaking layout or causing overflow issues.

Screenshots/Video:

Fix.Overlay.cards.scale.beyond.parent.container.on.hover.mp4

Checklist:

• My changes adhere to the project's contribution guidelines.
• Code changes are implemented cleanly and follow existing structure.
• The overlay card hover animation now remains within the image container.

[github-actions]

❌ Checks Failed

Status: 🚫 Not ready to merge

Please fix the following issues before merging:

📝 Code Linting Failed

Issue: Code formatting or style violations detected.

Specific problems:

• Code formatting issues detected

How to fix:

Platform	Command	Description
🐧 Unix/macOS/Linux	npm run format	Auto-fix all formatting issues
🪟 Windows	npm run format:file <filename>	Fix specific files
🔍 Check Only	npm run format:check	Check formatting without fixing

Need help with linting? Check out the Linting Guide for Windows Users for detailed instructions.

---

🛠️ Next Steps

1. Fix the issues mentioned above
2. Test locally to ensure everything works
3. Push your fixes to this branch
4. Wait for re-check - This bot will automatically run again

🤖 This comment will be updated automatically when you push new commits

[github-actions]

🎉 All Checks Passed!

Status: ✅ Ready to merge

✅ Completed Workflows

Workflow	Status	Details
🔨 Continuous Integration	✅ Passed	Build completed successfully
📝 Code Linting	✅ Passed	All formatting and style checks passed

---

🚀 This PR is ready for review and can be safely merged to main branch!

Great work! Your code meets all quality standards. 👏

[Raj2raaz]

@pikurasa please review