Как увеличить блок при наведении?

Question

[eellazy]

Всем привет!
Как реализовать увеличение блока при наведении как тут?
https://www.templatemonster.com/ru/

При наведении блок с товаром увеличивается и при этом не едет верстка. Ну и плюс появляются дополнительные кнопки.

Пробовал делать с scale но тогда у меня блоки в строке едут...

Answer 1

[Роман Сохин]

Конкретно тут https://www.templatemonster.com/ru/ при наведении карточка дублируется в контейнер в подвале - абсолютно позиционированный над карточкой при помощи js, и в этом контейнер уже показываются скрытые кнопки, которые не видны при обычном просмотре. Все это сделано на js.

Comments

[eellazy]

А есть ли решении по проще? Чтобы блок увеличивался без скриптов. Или может есть уже готовые варианты?

[Роман Сохин]

Тут простого решения нет.
Можно соорудить что-то похожее на css - но это потребует углубленных знаний css. Я когда-то делал аналогичный функционал для интернет-магазина, обошелся только CSS.
Про готовые решения не в курсе. Может и есть.

Answer 2

[Алексей Пахомов]

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

div {
    transition: all 0.4s linear;
}
div:hover {
    transform: scale(1.2,1.2);
}

Answer 3

[tyzberd]

что бы верстка не прыгала, должны быть блоки с position: relative + ширина + min-height
а внутри блок с absolute и его увеличиваете.

Answer 4

[Михаил Федотов]

Можно попробовать так:

jsfiddle.net/hd758bwo

Осталось подставить свои значения. Также можно играть с CSS для достижения нужного эффекта.

.main-div - обертка, можно убрать
.card - сама карточка, которая увеличивается и открывает скрытые блоки .card__hidden-*

Сделал с анимацией, с помощью transition. Можно анимацию вообще убрать и тогда задача упростится, так как в классы .card__hidden-* можно поставить свойство display:none и при событии .card:hover делать скрытым блокам display:block. Тогда получится как в Вашем примере.

Comments

[eellazy]

Добрый день! Спасибо за ответ. Единственная проблема это работа scale он увеличивает весь контент (буквы) Видимо здесь без js не обойтись

[Михаил Федотов]

eellazy, scale - это самый простой вариант. Можно обойтись и без него, увеличивая, например width и height. А также можно задействовать padding.

Можно даже оставить scale на главный блок, а другим, при наведении, поставить scale(0.8), например. Но это костыль, я бы так не делал. Хотя, работать будет.