Почему товары 4-5-6 налезли на верхние товары 1-2-3? Всего 6 товаров.
.products {
display: flex;
flex-wrap: wrap;
}
.product {
position: relative;
width: calc(100% / 3);
}
.product:hover .product-hide {
display: block;
}
.product-box {
position: absolute;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
padding: 20px;
}
.product-show {}
.product-hide {
display: none;
}
<div class="products">
<div class="product">
<div class="product-box">
<div class="product-show">Товар 1</div>
<div class="product-hide">Купить</div>
</div>
</div>
<div class="product">
<div class="product-box">
<div class="product-show">Товар 2</div>
<div class="product-hide">Купить</div>
</div>
</div>
<div class="product">
<div class="product-box">
<div class="product-show">Товар 3</div>
<div class="product-hide">Купить</div>
</div>
</div>
<div class="product">
<div class="product-box">
<div class="product-show">Товар 4</div>
<div class="product-hide">Купить</div>
</div>
</div>
<div class="product">
<div class="product-box">
<div class="product-show">Товар 5</div>
<div class="product-hide">Купить</div>
</div>
</div>
<div class="product">
<div class="product-box">
<div class="product-show">Товар 6</div>
<div class="product-hide">Купить</div>
</div>
</div>
</div>