How to create a reveal entire image on hover

Hello, I am trying to have a Div connected to a collection list with background image that covers the entire div and reveal the full image when on hover.

I managed to do it with the background functionality but I can’t manage to add a transition ease in out.

I tried to adjust the height and width manually. Normal state : Height 100% - Width Auto. Hover State: Height Auto - width 100%.

This didn’t work. The only way of showing a transition is to adjust both Height and Width not set to auto. By doing this the image doesn’t fully show on hover.

Is there a way I could use the animation tool on webflow?

Thanks


Here is my public share link:
https://preview.webflow.com/preview/artspydr-ecommerce?utm_medium=preview_link&utm_source=designer&utm_content=artspydr-ecommerce&preview=bc87836bfbc5a8384670ad50a4e2f6a8&workflow=preview