Added hover zoom effect to featured image in Principles section#751
Closed
Parth-co79 wants to merge 2 commits intosugarlabs:mainfrom
Closed
Added hover zoom effect to featured image in Principles section#751Parth-co79 wants to merge 2 commits intosugarlabs:mainfrom
Parth-co79 wants to merge 2 commits intosugarlabs:mainfrom
Conversation
🎉 All Checks Passed!
✅ Completed Workflows
🚀 This PR is ready for review and can be safely merged to Great work! Your code meets all quality standards. 👏 |
1 similar comment
🎉 All Checks Passed!
✅ Completed Workflows
🚀 This PR is ready for review and can be safely merged to Great work! Your code meets all quality standards. 👏 |
Author
|
@FirePheonix please kindly review and provide feedback on this PR. |
Member
|
I dont think so this adds any logical benefit to the website. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🖼️Add Hover Zoom Effect to Featured Image in Principles Section
📌Problem Description:-
The featured image in the Principles section was previously static and did not provide any visual interaction on hover. This made the section feel less engaging compared to other interactive elements on the page.
After upgrading the UI to include a hover zoom effect, the implementation needed to ensure that:
The zoom effect feels smooth and subtle.
The image does not overflow its container.
The gradient overlay and text remain visually intact and unaffected.
✅Solution Description:-
This PR enhances the featured image by adding a hover zoom effect while maintaining layout stability and visual hierarchy.
Key improvements:-
Wrapped the image inside a container with overflow-hidden to prevent layout breakage.
Applied the scale (zoom) effect only to the image using Framer Motion.
Ensured the gradient overlay and text stay above the image using proper positioning and stacking.
The zoom effect is subtle, smooth, and responsive across screen sizes.
🛠️Technical Details:-
Framework: React
Styling: Tailwind CSS
Animation: Framer Motion
Affected Section: Principles (featured image)
🎯Result:-
Improved visual engagement on hover
No overflow or overlap issues
Clean, responsive, and accessible UI behavior
Before hover:-
After hover:-
This PR addresses Issue #750