[Помогите] Увеличение всего блока с содержимым в размерах при наведении

Суть вопроса в теме. Вопрос как это можно реализовать? Простым сss или это только js надо применять?

 

Блоку присваивается класс, к примеру <div class="box2">. Далее в CSS код

Код:

.box2:hover {
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
    transition: .2s linear;
}

Данный код увеличивает блок с содержимым в 1.1 раза. Если надо иначе, то изменить числа в коде. Так же в коде можно менять другие свойства, цвет текста, размер шрифта и т.д.
И чтоб, когда блок не в фокусе, плавно уменьшался размер до нормального

Код:

.box2 {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    transition: .2s linear;
}

А если вставить еще

Код:

box-shadow: 0px 0px 12px #000;

то при увеличении у блока появится тень.