0

Есть список товаров в виде блоков с 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>

2 ответа 2

1

Разобрался.

Внутри .item[position=relative] надо добавить блок .wrap[position:absolute;overflow:hidden] и по :hover изменять размер и z-index:2

1
  • Размер вообще менять не нужно.
    – Qwertiy
    12 июн 2015 в 10:48
0

Просто на hover меняй overflow на visible, оставляя размеры неизменными. Внутрь элемента вложи другой, у готорого будет белый фон. Ещё надо будет использовать z-index, если собираешься перекрывать элементы, которые лежат в разметке раньше.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.