Как правильно использовать css transcorm scale или есть ли подобное решение?

Question

[smailenemy]

Подскажите, как сделать, чтобы текст в картинке при свойстве transform: scale; не расплывался, а оставался чётким.
Сделал на таком примере, но у меня всё также, есть картинка размером 100х400, её изменить нельзя, внутри есть текст, нужно увеличивать при наведении как бы из центра просто масштабировать.

https://jsfiddle.net/4r3dcz0z/

Может есть какое-то решение на jquery, js и т.д.?

Answer 1

[Алексей Уколов]

Никакое количество jquery не сможет сделать чёткой картинку, которая выводится крупнее, чем её реальный размер.

Comments

[smailenemy]

А если картинку больше сделать? Как реализовать?

[Алексей Уколов]

Сделать картинку больше, уменьшать её в обычном состоянии и увеличивать до полного размера при наведении - scale, но в другую строну.

[smailenemy]

Алексей Уколов: Спасибо большое. Всё получилось.!

[smailenemy]

Алексей Уколов: Сделал картинку большего размера, для обычного состояния поставил scale (0.82) а при hover scale(1), так теперь в обычном состоянии размыто (((

[Алексей Уколов]

Надо подбирать какие-то значения, при которых размытость будет не так заметна. Или использовать svg. Ну и почитайте по ссылкам, которые я вам в прошлом вопросе давал.

[smailenemy]

Алексей Уколов: Кстати проблема только в Chrome