Помогите разобраться с CSS

[7up]

Сделал тень при наведении на картинку товара в списке товаров, режим grid.

 

 

.product-grid .image img:hover {

padding: 2px;

border: 1px solid #cccccc;

-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.8);

  -moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.8);

  box-shadow: 0px 0px 20px rgba(0,0,0,0.8);

 

}

Как видно на картинке ниже, левые и верхние части получаются не видны. Блок с списком товаров как бы ниже остальных.

Что только не пробовал, z-indexы использовал, не получается поднять тень выше левого и верхнего блоков.

 

Подскажите кто плотно работает с CSS Опенкарта, куда копать? 

 

Заранее спасибо за ответ.

[orlo73]

у левого и верхнего блоков тоже пробовали z-index менять? По идее на них надо поставить 1, на картинках 2

[7up]

у левого и верхнего блоков тоже пробовали z-index менять? По идее на них надо поставить 1, на картинках 2

В том то и дело, ставлю у img индекс 100, у остальных 0, справа, сверху, результата нет. Вот и запутался окончательно. Не могу найти решения.