Unrealistic / Distracting Image Hover Effect

Documentation Type

README file

Current Issue

The documentation does not clearly describe the intended hover behavior for images used across the application. Currently, when users hover over images, the effect appears overly aggressive and unrealistic, but there is no documentation explaining:

Why this hover behavior exists

What visual behavior is expected

Whether this is intentional or a placeholder

This lack of documentation makes it difficult for contributors to understand the design intent and maintain UI consistency.

Proposed Improvement

Update the documentation to clearly define the expected image hover behavior, including:

Purpose of the hover effect

Recommended animation type (e.g., subtle scale, shadow, opacity)

UX guidelines to avoid excessive zoom or sudden transitions

Consistency rules for image hover effects across pages

Adding a short guideline or example will help contributors align UI changes with the intended user experience.

Affected Sections

README.md – UI/UX Guidelines (new or updated section)

Frontend styling documentation (if available)

Any section describing visual components or design behavior

Target Audience

New contributors

Additional Context

The current hover effect can feel distracting and breaks visual realism. Clear documentation would help contributors understand whether to keep, modify, or redesign this behavior and ensure a smoother, more polished user experience.

Implementation

• I can write the documentation changes myself
• I can provide review and feedback
• I prefer to let others handle the implementation

Confirmation

• I have checked that this improvement isn't already covered elsewhere
• I have searched for existing documentation issues before creating this one