Open TejasMore477 opened 6 days ago
github-actions[bot]
commented
6 days ago Thank you for creating this issue! 🎉 Your issue will soon be reviewed by Project Maintainers. In the meantime, please make sure to provide all the necessary details and context. If you have any questions or additional information, feel free to add them here. Your contributions are highly appreciated! 😊
You can also check our CONTRIBUTING.md for guidelines on contributing to this project.
github-actions[bot]
commented
6 days ago Thanks for creating the issue in WildGuard! Before you start working on your PR, please make sure to:
Attach before & after screenshots in your PR for clarity.
We're excited to see your contribution as part of Hacktoberfest 2024! 🎉
Happy open-source contributing!
sairiteshdomakuntla
commented
6 days ago hello @TejasMore477 , i think i can fix this, can you please assign this to me?
Description:
On the second page of the website, just below the heading "Raise your hands to save world animals life", there are several buttons with a hover effect. When hovered, the size of the buttons increases, causing adjacent components to shift or get displaced. This behavior disrupts the overall design and layout of the page, leading to a less polished and professional user experience. Hover animations should enhance the UI but not cause layout shifts or movement of surrounding elements.
Small UI disturbances like this can greatly impact the overall user interface and experience.
How to Reproduce:
Open the website. Scroll to the second page, just below the heading "Raise your hands to save world animals life". Hover over the buttons under this section. Observe the sudden movement or displacement of other items during the hover animation.
Screenshot:
How to Solve:
The hover effect should be adjusted to ensure that the size change of the buttons does not affect the layout of the surrounding components. This can be achieved by using techniques such as setting a fixed size for the button container, using padding, or using transform: scale() for hover without affecting the document flow.
Additional Notes:
Make sure the hover animations maintain the integrity of the layout. Ensure that any size or positioning changes on hover are contained within the button's own space.