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

Question

[darknez]

Подскажите пожалуйста, как сделать такой эффект при наведении на блок, чтоб он увеличивался поверх других блоков, при этом не подвигал рядом стоящие блоки

Answer 1

[Ivan Demidov]

element:hover {
    transform: scale(1.4);
}

Comments

[darknez]

Делал так, но когда добавляются доп элементы типа рейтинка и кнопки в корзину, то оно не поверх блоков увеличивается, а подвигает еще соседние

[mr_dev1l]

darknez: а вы element задавали стили? -webkit-transition: all 0.5s ease; transition: all 0.5s ease;-moz-transition: all 0.5s ease; Ничего не должно ехать

[Ivan Demidov]

https://jsfiddle.net/dr3bk5zc/

[darknez]

Ivan Demidov: Вот пример, смещаются блоки https://jsfiddle.net/p0zkdjwn/ подскажите как исправить?

[Ivan Demidov]

https://jsfiddle.net/p0zkdjwn/2/

Answer 2

[Михаил Чирский]

Вот пример, давно делал на Интернет магазине, наведите на товары и увидите данную реализацию, а scale не всегда хорош и не везде.

Comments

[darknez]

Пример это хорошо, но не могли бы тогда написать как реализовать такое?

[Михаил Чирский]

darknez: Попробую пояснить, ну поковырявшись в примере, можно легко понять.
Все просто у нас есть общий родитель listing, в нем есть дети item, у детей задана статичная высота и ширина, 240 и 190 соответственно, а внутри есть блок inner, вот вся магия происходит именно в нем, по наведению, мы делаем его absolute и выдвигаем за границы нашего item, по скольоку у нас item остается своей ширины, блоки не прыгают и ничего не скачет, надеюсь доступно описал)

Answer 3

[Anna_BS]

codepen.io/Anna_Batura/pen/OMbgVq
Убрав transition можно избежать дрожи блоков