Лучше на JS, чтобы считать нужные размеры блока в момент наведения, чтобы делать грамотный transform scale в зависимости от размера блока (так делают в баннерах рекламы Яндекса, например).
Если прямо только с помощью CSS, то можно так (заранее гигантский scale):
Можете менять отдельно как scaleX, так и scaleY, если у вас более-менее одинаковые размеры общих блоков:
Только на CSS точного и прямо крутого эффекта не достичь.
Наивно ждать ответа без предоставления прототипа анимации. Когда дизайнер хочет дать задачу разработчику, он даёт ему видео, как он видит анимацию, ибо может быть столько мелких аспектов, что никакой ответ и предположение не учтёт их всех.
Если вы ориентируетесь именно на вёрстку, то для проверки именно верстки лучше сидеть в целевых ОС, ибо подавляющее большинство будет именно на Windows. Как минимум, из-за этого стоить сидеть на Windows, чтобы смотреть влияние багов сборок браузеров под эту ОС, смотреть на рендеринг шрифтов, полосы прокрутки и т. п.
Вот я работаю в MacOS, но проверяю всё конечно именно в Windows.
Ну а под Linux в целом можно работать в данном направлении, но не нужно. Тот же Photoshop.
Если у вас статика, можете впиндюрить вручную, LOL, в каждом вашем этом HTML-файле.