@seotopforever
Программист

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

5c9b0a9f3867f632383955.png
вот так при наведении карточка смотрится в моем проекте. Я хочу чтоб было как на фотке ниже. Но при попытке задать ей при hover z-index повыше и width побольше, она раздвигает верстку. Как сделать, чтоб все остальные элементы не сдвигались, если при ховере увеличить ширину, и чтоб элемент не сдвигал остальные а накрывал их. Какой тут принцип? как сделали вот эти ребята (фото ниже)?
5c9b0b359e162124780620.jpeg
Дорогие друзья, мне не надо от Вас верстки элемента, скажите пожалуйста лишь принцип, пару фишек, ткните пальцем. Буду очень признателен.
Далее привожу свою разметку на всякий случай
<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;
}
  • Вопрос задан
  • 220 просмотров
Решения вопроса 2
HunteR-VRX
@HunteR-VRX
Помешанный на развитии
Масштабирование элемента производить не за счет увеличения width, а transform: scale(1.6);
более того, на псевдокласс hover прописывайте position: absolute для элемента (карточек), необходимо извлечь элемент из нормального потока и как следствие поместить его на слой более высокого уровня (сделать его плавающим)
Ответ написан
KickeRocK
@KickeRocK
FrontFinish
Ловите
Только под себя подгоните и бэкграунд не прозрачный
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
CodeInMyHeart
@CodeInMyHeart
SOS
elem:hover{
transform: scale(1.4);
z-index: 2;
}

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы