Como fazer o efeito zoom com Scale on Hover with Transition no CSS

Scale on Hover with Transition é um efeito de design web onde um elemento, como um botão ou uma imagem, aumenta ligeiramente de tamanho quando o cursor do mouse passa sobre ele. Esse efeito é geralmente acompanhado por uma transição suave, criando uma experiência visualmente agradável e interativa para os usuários. É comumente usado para destacar elementos interativos em um site, fornecendo feedback visual imediato ao usuário quando eles interagem com esses elementos. Isso adiciona dinamismo e atratividade ao design da página, melhorando a usabilidade e a experiência do usuário.

Utilize o scale do css com transição para trazer um efeito de ampliar uma imagem ou div ao passar o mouse

.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }