CSS: Увеличение блока при наведении

687

15 декабря 2016, 16:32

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

Answer 1

Разобрался.

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

Answer 2

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