How to add hover effect to the element grid in flexbox?

5c9b0a9f3867f632383955.png
so when you hover the card looks in my project. I want it like the picture below. But when I try to ask her when hover z-index higher and the width bigger, it pushes the layout. How to make all the other elements did not move, if on hover increase the width, and that element has not been moved and the rest covered them. What's the principle? how did these guys (photo below)?
5c9b0b359e162124780620.jpeg
Dear friends, I don't need You to layout item, please tell me a principle, a few chips, poke your finger. I would be very grateful.
Next, bring your layout just in case
<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 item in subitem's.GroupProduct.Take(4))
{
 <li class="thumbProd" data-id="@item.ProdId">
 <a href="@subitem's.Link"><img data-id="@item.ProdId" src="@subitem's.Img" /></a>
</li>
}

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

 <li data-id="@item.ProdId" class="raquo">&raquo;</li>
the <li>
 <ul class="contSmallimgs2">
 @foreach (var item in subitem's.GroupProduct.Skip(4))
{
 <li class="thumbProd" data-id="@item.ProdId">
 <a href="@subitem's.Link"><img data-id="@item.ProdId" src="@subitem's.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> R./piece</h6>
}
else
{
 if (item.Price > 0)
{
 <h6 data-id="@item.ProdId">
 @String.Format("{0:0.##}", @item.Price) p./PC.
</h6>
}
else
{
<h6>
 Price on request
</h6>
}
}
}
else
{
<h6>
 Price on request
</h6>
}
</a>
</div>
}


Further 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;
}
March 19th 20 at 08:45
3 answers
March 19th 20 at 08:47
Solution
Item to produce, not by increasing the width, and transform: scale(1.6);
moreover, the hover pseudo-class to specify position: absolute for the element (cards), you must extract the element from the normal flow and as a consequence place it on a layer higher level (make it floating)
I was doing absolute, but he then flies from his seat. In short, I understand - it is necessary to do the mesh elements inside each relative and absolute to place and when you hover it will be possible to push even for the rest of the page - right? - Queen.Miller87 commented on March 19th 20 at 08:50
right - Annetta.Mayer44 commented on March 19th 20 at 08:53
@Queen.Miller87, no need for absolute positioning a substrate to hang with shadow. - Connie.Gibson commented on March 19th 20 at 08:56
gamma.santehnica.ru/catalog/unitazi

I was doing so. No scripts to calculate the dimensions (here the height, for example) depending on the size of the hidden blocks that come up when you hover. - Connie.Gibson commented on March 19th 20 at 08:59
March 19th 20 at 08:49
Solution
Catch
Only under him wing and the background is not transparent
March 19th 20 at 08:51
elem:hover{
transform: scale(1.4);
z-index: 2;
}

So apart will not be

Find more questions by tags HTMLjQueryCSS