Есть список товаров в виде блоков с display: inline-block
.
Нужно при наведении курсора на блок его увеличивать, но чтобы остальные блоки не сдвигались. Примерно как тут: wildberries.ru/catalog/20/women.aspx
Пытался скопировать стили оттуда, но что-то ничего не получается. Не совсем понимаю, как оно работает.
Сейчас у меня что-то типа этого:
#goods { width: 330px }
.item {
position: relative;
float: left;
width: 80px;
height: 140px;
margin: 5px;
padding: 8px;
border: solid 1px #999;
overflow: hidden;
text-align: center;
}
.item:hover {
height: 180px;
}
p { margin: 3px }
<div id="goods">
<div class="item">
<img src="http://placehold.it/80x120" />
<p>Cool item</p>
<button>buy</button>
</div>
<div class="item">
<img src="http://placehold.it/80x120" />
<p>Cool item</p>
<button>buy</button>
</div>
<div class="item">
<img src="http://placehold.it/80x120" />
<p>Cool item</p>
<button>buy</button>
</div>
<div class="item">
<img src="http://placehold.it/80x120" />
<p>Cool item</p>
<button>buy</button>
</div>
<div class="item">
<img src="http://placehold.it/80x120" />
<p>Cool item</p>
<button>buy</button>
</div>
</div>