Image zoom in/out animation on hover

[cruxcode]

Create a component that has the animation as shown in the clip attached with this description. You will have to learn two things -

1. How to create a component? - Find details here
2. What is the best way to create an animation component that is reusable? - Find details here

The React component signature

const ZoomImage = React.forwardRef<HTMLDivElement, {
  styles: React.CSSProperties,
  custom: {
    src: string; // src of the background image
    initialSize: string; // initial size of the background (string because 50% 50%)
    hoverSize: string: // size of the background when hovered
  }
}
>((props, ref)=>{
 ...
});

Steps

1. Create a new project - follow docs here
2. Create the custom component - follow this article
3. Add a file called ZoomImage.md in made-with-atri folder and write your GitHub repo name in the file. Make sure the GitHub repo is public.

https://user-images.githubusercontent.com/30747788/236511658-e51749c4-fdfc-4814-abff-6c8e860ac42c.mov

[Arthavruksha]

I would like to take this, can you assign me it?

[sumitshinde-84]

I would love to work on it , can you please assign it to me?

[cruxcode]

@Arthavruksha please work on this similar issue - https://github.com/Atri-Labs/atrilabs-engine/issues/780 @sumitshinde-84 please work on this similar issue- https://github.com/Atri-Labs/atrilabs-engine/issues/781