Как плавно увеличивать блок при наведении?

Я учусь делать по макету следующую вещь:


Нужно, чтобы при наведении плавно увеличивался блок и ставилась другая картинка.
Я не понимаю, как можно увеличить плавно блок, чтобы расширялся равномерно со всех сторон и также чтобы менялась картинка на другую и плавно увеличивалась.

У меня получилось очень ужасно https://codepen.io/anon/pen/LrZXyJ . Блок увеличивается в другую сторону, и появляется резко картинка.