Анимация таблицы в CSS

Реализуйте эффект, чтобы строка таблицы изменяла форму при наведении курсора.

Главная » Задачка на прокачку » Анимация таблицы в CSS
Задачка на прокачку — упражнение на знание CSS. Времени на решение уйдёт не много, а размяться поможет. Главное условие — соблюдать ограничения.

Что нужно

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

Параметры изменения строки таблицы

Параметры изменения строки таблицы.

При наведении на строку, она выходит за края таблицы на 16 пикселей с обеих сторон. У сроки появляются скругления всех углов — на 8 пикселей. И добавляется тень. Параметры тени:

box-shadow: 0 8px 32px 0 rgba(101, 78, 147, 0.12),
              0 -4px 16px 0 rgba(101, 78, 147, 0.06);

Чего нельзя

Запрещается править HTML. Нельзя использовать Javascript, даже если очень хочется; он тут не нужен.

Не нужно править существующий CSS, дописывайте недостающий.

Решение

Используйте вкладку «CSS» для добавления стилей, а во вкладке «Result» отслеживайте, что получается.

Публиковать в комментариях только CSS не стоит, это не наглядно. Размещайте свой вариант решения на jsfiddle.net и делитесь ссылкой в комментариях.