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

Question

[kachurinets]

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


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

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

Answer 1

[0xD34F]

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

Увеличение - с помощью scale, картинку показывать "плавно" можно с помощью opacity. Как-то так.

Comments

[kachurinets]

Спасибо за ответ. Пытаюсь по аналогии сделать так, чтобы текст появлялся, но он почему вообще не появляется.
https://codepen.io/anon/pen/pKbGvY

[0xD34F]

kachurinets, ну, задайте тексту размер и цвет.