Увелечение размера блока товара при hover

[parnas]

Всем привет! Ломаю голову как можно сверстать страницу товаров интернет магазина на котором при наведении на блок товара, размер блока увеличиваеться по 20px по краям(составляя 40 пикселов). Более конкретно: Сам блок с размером 163px.

С помощью inline-block выстроен в ряд. Естественно при изменении размера, нарушаеться сетка. Дорогие друзья, что можно делать в этом конкретном случае чтобы сетка не нарушалась?

 

Edited June 29, 2014 by parnas

[advokatua]

заготовку хотя бы закинул.

Position:absolute задать товару при ховере, и увеличить паддингом - можно попробовать, и z-index возможно нужно будет еще задать

[parnas]

Задать Position: absolute не получиться так как relative уже задан. А если зададимь absolute, как быть с абсолютно спозиционированными стикерами(акции, скидки) внутри блока? Заготовка - http://jsfiddle.net/parnas/UxL7U/

Edited June 28, 2014 by parnas

[advokatua]

http://jsfiddle.net/UxL7U/1/

там блок закрывающий только где-то напутал, так что проверяй.

Edited June 28, 2014 by advokatua

[parnas]

Огромное спасибо за помощь и наводку.  Гениально! А то уже совсем опустил руки..

[parnas]

Возникла еще один маленькая проблема которого можно было преугадать. Теперь, изза того что высота каждого товара отличаеться, при ховере товари нижнего ряда резко "пригают" вниз. Как этого можно избежать или хотя делать так, чтобы это перерасположения происходило плавно. Спасибо заранее.