Как увеличить картинку вширь и ввысь при наведении без сдвига нижнего края?

Question

[make_dev]

Привет!
Как сделать такое увеличение картинки при наведении, как на макете? Нужно, чтобы картинка увеличивалась вширь и ввысь, но при этом ее нижний край оставался на одном уровне с другими картинками и не сдвигался.
При применении scale по Y картинка увеличивается вверх и вниз, и соответственно ее нижний край сдвигается и не находится на одном уровне с другими картинками.


Update: Вдруг кому пригодится, самое простое решение - использовать свойство tranform-origin: bottom.
Трансформация по оси y происходит относительно нижней стороны элемента.

Вот код.

img {
      
      -webkit-transform-origin: bottom;
      transform: scale(0.9);
}

img:hover {
        transform: scale(1);
}

Answer 1

[Алексей Струков]

можно попробовать сделать картинки абсолютно позиционированными c top: 0 и bottom: 0, и при ховере увеличивать свойство top до -30 например.
Еще можно сделать все картинки флекс итемами и на ховере делать margin-top: -20px и увеличивать ширину.
Предварительно у флекс итемов поставить например transition: all 0.5s linear;

вот код: https://jsfiddle.net/o3nxvcya/

Answer 2

[Rithmsamba]

Используйте при трансформации свойство transform-origin

Answer 3

[Владимир]

вот так