Как добавить hover эффект элементу сетки на flexbox?

Question

[Сергей Черников]

вот так при наведении карточка смотрится в моем проекте. Я хочу чтоб было как на фотке ниже. Но при попытке задать ей при hover z-index повыше и width побольше, она раздвигает верстку. Как сделать, чтоб все остальные элементы не сдвигались, если при ховере увеличить ширину, и чтоб элемент не сдвигал остальные а накрывал их. Какой тут принцип? как сделали вот эти ребята (фото ниже)?

Дорогие друзья, мне не надо от Вас верстки элемента, скажите пожалуйста лишь принцип, пару фишек, ткните пальцем. Буду очень признателен.
Далее привожу свою разметку на всякий случай

<section class="products" id="prodListSmall">
    @foreach (var item in Model.ProdForPaging.Items)
    {
 <div class="product-card">
<div class="product-image">
                    <div class="contMain">

                        @if (item.GroupProduct != null && item.GroupProduct.Count > 0)
                        {
                            <ul class="contSmallimgs1">
                                @foreach (var subItem in item.GroupProduct.Take(4))
                                {
                                    <li class="thumbProd" data-id="@item.ProdId">
                                        <a href="@subItem.Link"><img data-id="@item.ProdId" src="@subItem.Img" /></a>
                                    </li>
                                }

                                @if (item.GroupProduct.Count > 4)
                                {

                                    <li data-id="@item.ProdId" class="raquo">&raquo;</li>
                                    <li>
                                        <ul class="contSmallimgs2">
                                            @foreach (var subItem in item.GroupProduct.Skip(4))
                                            {
                                                <li class="thumbProd" data-id="@item.ProdId">
                                                    <a href="@subItem.Link"><img data-id="@item.ProdId" src="@subItem.Img" /></a>
                                                </li>
                                            }
                                        </ul>
                                    </li>
                                }
                            </ul>
                        }

                        <div class="prod_img">
                            <a href="/products/product/@item.ProdId"><img class="img_list_prod" data-id="@item.ProdId" src="@item.ImagePath" alt="@item.Name"></a>
                        </div>
                    </div>
                </div>
 <div class="prod-info">
                <a href="/products/product/@item.ProdId">
                    <h5 data-id="@item.ProdId">@item.Name</h5>
                    @if (item.Nalichie)
                    {
                        if (item.Sale)
                        {
                            <h6 data-id="@item.ProdId">@String.Format("{0:0.##}", @item.Price) <span class="spanSale">@String.Format("{0:0.##}", @item.OldPrice)</span> р./шт.</h6>
                        }
                        else
                        {
                            if (item.Price > 0)
                            {
                                <h6 data-id="@item.ProdId">
                                    @String.Format("{0:0.##}", @item.Price) р./шт.
                                </h6>
                            }
                            else
                            {
                                <h6>
                                    Цена по запросу
                                </h6>
                            }
                        }
                    }
                    else
                    {
                        <h6>
                            Цена по запросу
                        </h6>
                    }
                </a>
            </div>
}

Далее css

.products {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
}

.product-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin: 15px;
    width: calc(25% - 5 * 15px);
    border: solid 1px transparent;
}

.product-image {
    align-items: center;
    height: 280px;
}

Answer 1

[ReActor Дмитрий Вершанский]

Масштабирование элемента производить не за счет увеличения width, а transform: scale(1.6);
более того, на псевдокласс hover прописывайте position: absolute для элемента (карточек), необходимо извлечь элемент из нормального потока и как следствие поместить его на слой более высокого уровня (сделать его плавающим)

Comments

[Сергей Черников]

я делал absolute, но он тогда улетает со своего места. Короче я понял - надо сдалать элементы сетки relative а внутрь каждого поместить absolute и при hover можно будет раздвигать хоть на всю страницу - правильно?

[ReActor Дмитрий Вершанский]

верно

[Rustam Bainazarov]

Сергей Черников, нет, надо на абсолютное позиционирование вешать подложку с тенью.

[Rustam Bainazarov]

gamma.santehnica.ru/catalog/unitazi

Я тут делал так. Ни у скриптами просчитывать габариты (тут высоту, к примеру) в зависимости от размеров скрытых блоков, что выплывают при наведении.

Answer 2

[Andrew]

Ловите
Только под себя подгоните и бэкграунд не прозрачный

Answer 3

[Август Милович]

elem:hover{
transform: scale(1.4);
z-index: 2;
}

Так точно раздвигаться не будет