Верстка витрины

Результат

Название товара

Описание товара, всплывающее при наведении на товар, например, цена, кнопки.

99.99 85.50

В корзину

В самой верстке ничего сложного нет. Товары располагаются в сетке, сверстанной с помощью классов Bootstrap. В данном примере количество товаров в строке будет 4 для обычных мониторов, 2 для планшетов и 1 для мобильных телефонов.

HTML

    <div class="row">
        <div class="col-12 col-sm-6 col-md-3">
            <a href="#" class="item text-center">
                <div class="main-content">
                    <img src="..." class="img-thumbnail" style="margin: 10px auto;" />
                    <h2>Название товара</h2>
                </div>
                <div class="additional-content-wrap">
                    <div class="additional-content">
                        <p>Описание товара, всплывающее при наведении на товар, 
                        например, цена, кнопки.<p>
                        <span class="d-inline-block text-muted"><s>99.99</s></span>
                        <span class="float-end"><b>85.50</b></span>
                        <button class="btn btn-primary btn-block">
                            В корзину <span class="fa fa-shopping-cart"></span>
                        </button>
                    </div>
                </div>
            </a>
        </div>
        ...
    </div>

CSS

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

.item {
    display: block;
    border: 1px solid #b5e9a7;
    border-radius: 3px;
    position: relative;
    background: #fff;
    text-decoration: none;
    color: #474747;
    z-index: 0;
}
.item:hover {
    z-index: 1;
}
.additional-content-wrap {
    position: absolute;
    top: 0;
    left: -1px;
    right: -1px;
    bottom: 0;
    visibility: hidden;
    transform: scaleY(.8);
    transform-origin: top;
    transition: transform .2s ease-out;
    z-index: -1;
    backface-visibility: hidden;
}

.additional-content-wrap:before {
    content: "";
    float: left;
    height: 100%;
    width: 100%;
}

.additional-content {
    position: relative;
    top: -1px;
    padding: 20px;
    background: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, .5);
    border: 1px solid #56bd4b;
    border-radius: 3px;
}
.item:hover .additional-content-wrap {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}