Как задать анимацию блоку?

Question

[wiley]

Есть блок, 600x300, и есть изображение 48x48.
Блок находится в 5 пикселях справа от изображения.
Нужно что бы при наведении на картинку появлялся блок, но не просто, а увеличиися в размере.
Например, в начале блок 0x0 (невидим) а потом начинает расти и до 600x300.
Заранее спасибо

Answer 1

[teotlu]

Если вкратце, то вот так. Но из описания задачи непонятно, блок поверх контента или нет. В моём варианте — нет. Можете подогнать под себя. Набросал достаточно быстро, может быть немного косячно и избыточно в плане CSS.

Answer 2

[Nikolay Talanov]

codepen.io/suez/pen/dcbdd6e94968897628766796c3956fa6
Первый блок со старта имеет размеры 600х300, но невидим, ибо уменьшен с помощью transform: scale(0);
Этот метод работает быстро и он никак не будет задевать рядом стоящие элементы (они со старта будут расположены так, как будто рядом с ними стоит блок 600х300), то есть минимум нагрузки при анимации. Но из-за этого вы получите sub-pixel rendering неточность, и границы будут чуточку размытыми. Так же важно уточнить, что я использую transform-origin: 0 0; для того чтобы анимация увеличения происходила с левого верхнего угла. Если этот параметр убрать, то увеличение будет происходить относительно центра.
Второй блок имеет на старте ширину/высоту по нулям и при наведении на картинку происходит транзишен этих параметров до заданных величин. Соответственно этот процесс будет задевать все элементы в своем потоке + транзишен размеров само по себе затратное затратное действие и если внутри будет текст, то во время анимации с ним будут происходить страшные вещи.