Why does my tailwind height transition not apply to an image element?

Question

I'm trying to implement a transition on an image so when I hover over it, the image expands with a smooth transition. I've recreated my issue on Tailwind Play https://play.tailwindcss.com/QfZSly1nEB.

As shown, hovering over the image works as expected and the image size changes, however it is not animated as is expected. I've followed the guidance in the docs regarding transition properties but with no luck

user_14807111 · Answer

it is because of the class h-auto. if you change it to an absolute value, the transition will works.

https://play.tailwindcss.com/C68QXPaQs0

user_16748707 · Answer

Maik's answer works perfectly, but you also have the option of using scale on hover if you want it to centrally stay in the same place.

https://play.tailwindcss.com/JISPGXFeIT

Why does my tailwind height transition not apply to an image element?

2 Answers