Чем заменить transform scale?

Question

[nskaskyou]

Ребят.
Задача: по наведению на div он должен немного увеличиваться.

Попробовал решить этот вопрос transform scale, но столкнулся с проблемой замыливания текста внутри увеличенного div. (увеличение необходимо на 1.014 и ни о каких 1.2 не может идти речи и поэтому не подобрать кегль шрифта, да и кегль никак не поможет он размытия в момент анимации).

Попробовал заменить transform scale заданием новой ширины и высоты div и смешением на половину высоты вверх и половину ширины влево, но анимация идет рывками и градиент фона лагает жутко и марджины тоже скачут.

Что делать и как вообще с этим справляться то ?
Может в js что есть ? Я просто пока в нем не силен.

Заранее спасибо.

Comments

[alex]

что мешает отделить анимированный фон от текста на уровне разметки? ну или псевдо элементы юзать

Answer 1

[Дмитрий]

Пример

Answer 2

[KononovD]

Ну, с одной стороны можно уменьшить скорость анимации до предела, с другой забить на размыливание текста, с третьей сделать scale(1.1)

ну или вот такой костылек:
https://codepen.io/Kononov_D/pen/rRwZVK

з.ы. в пол 2 ночи всегда мечтал рисовать черные квадратики))