[Feature]: Zoom in on profile picture while hovering over Avatar component

[nimeshatmsft]

Area

React Components (@fluentui/react-components)

Describe the feature that you would like added

It would be awesome if the Avatar component could demonstrate more responsiveness upon user interaction.

Currently, the avatar component comprises of a profile picture and a badge. There are only a handful of things we can do with it to make it feel responsive. It would be awesome if we could add and expose the ability to zoom in on the profile picture while maintaining the same clipping behaviour around the badge rather than needing to enlarge the whole Avatar. This would allow our app to emphasize the focus/hover behaviour on the component that is being focused/hovered on.

The proposal is to only update the scale of the profile picture but not the container itself. Something like this:

Additional context

No response

Have you discussed this feature with our team

No response

Validations

• Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.

Priority

Medium

[layershifter]

FYI that could be achieved by CSS only, https://stackblitz.com/edit/h81nbkjk?file=src%2Fexample.tsx.