Как увеличить блок при наведении, но не его содержимое, чтобы он не смещал соседние (фото внутри)?

Question

[Атланта]

https://jsfiddle.net/j6rm1e8n/

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

Способы, которыми я пыталась этого добиться не дали необходимого результата. Точнее используя padding, отрицательные margin и position: relative я достигла почти того, что мне нужно. При увеличении одного блока другие не смещаются. Но стоит прописать transition, всё словно начинает дрожать.

Comments

[Nikita-Fast]

transition надо уменьшить до 0.35s - тогда всё происходит гораздо лучше и transform:scale(1.1); как показал в ответе 0xD34F

Answer 1

[AngReload]

Comments

[Атланта]

Ооо, это как раз то что мне нужно!! Благодарю) Не перестаю удивляться свойству box-shadow. Оно уже не раз решало мои проблемы)

[Nikita-Fast]

Атланта, этот подход красивее ....признаю

Answer 2

[Nikita-Fast]

другой вариант : https://codepen.io/topicstarter/pen/oaEgZN

Comments

[Атланта]

используя transform: scale текст увеличивается тоже

Я сделала одну реализацию, но мне кажется должно быть более красивое и просто решение.

https://jsfiddle.net/7v2zatx9/

[Nikita-Fast]

Атланта, ну а текст стало быть уменьшить ...

[Nikita-Fast]

Атланта, а как же адаптивность ? величины у вас фиксированные .. писать медиа запросов просто гора ...даже элементарно не вмещается в jfiddle

[Атланта]

Nikita-Fast, сейчас уменьшила текст, но мне всё равно немного не нравится, что смещаются строчки относительно блоков без hover. Всё... кажется пора спать) Спасибо.

[Nikita-Fast]

Атланта, проверьте ссылку опять - я сделал примерно так как надо

[Атланта]

Nikita-Fast, я использую flex и пишу sass, там многое что на переменных завязано. Поэтому, если я нигде не ошибаюсь, то сделать медиа запросы будет несложно, надо лишь изменить значение переменных.

[Атланта]

Nikita-Fast, но вообще это мой первый опыт использования препроцессоров, так что возможно меня ждет сюрприз и всё не так безоблачно

Answer 3

[0xD34F]

Может, вам использовать transform: scale? Как-то так.

Comments

[Атланта]

Я знаю об этом свойстве. В этом ведь и загвоздка, что я не хочу, чтобы увеличивался текст. Сейчас реализовала ещё один вариант, создав дополнительный div c position: absolute. Но я не удовлетворена этим решением. Как-то муторно.

[Атланта]

вот как-то так https://jsfiddle.net/7v2zatx9/
только мне не нравится реализация.
Есть идеи как-то проще и элегантнее)?

[Nikita-Fast]

Атланта, я вообще по другому сделал : codepen