Увеличение блока при наведении с перекрытием остальных

[SuperRomario]

Нужно в интернет магазине сделать так, чтоб при наведении на товар в категории показывалось его описание, но при этом нижние блоки не сдвигались
Очень наглядно это реализовано тут:

Чего я только у себя не пробовал и как только с бубном не танцевал вокруг z-index:99 ничего не получается. При наведении описание появляется, но блок под ним не перекрывается, а сдвигается вниз

Стили, которые в этом участвуют

Спойлер: CSS

.tab-grid, .product-grid{
    margin:0;
    padding:0px;
    width: 100%;
    overflow: hidden;
    position:relative;
    text-align:center;
}
.tab-grid, .product-grid .block{

position:relative;
width:199px;
padding:10px;
text-align:center;
    height: 376px;
    float: left;  
}

.tab-grid:hover, .product-grid .block:hover{

z-index:99;
    height: auto;
      
}

.block{
    margin:0px 4px 8px 4px;
    background-color:#fff;
    vertical-align:top;
    -webkit-border-radius: 4px;
    -moz-border-radius: 5px;
    -khtml-border-radius:4px;
    border-radius: 4px;
    border:1px solid #ddd;
    overflow:hidden;   
    transition-delay: 0;
    transition-duration: 0.2s;
    transition-property: all;
    transition-timing-function: cubic-bezier(0, 0, 1, 1);
}

.block:hover{
    border-color:#555555;
    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.2);
    -moz-box-shadow:  0px 0px 7px rgba(0, 0, 0, 0.2) ;
}

Специалисты в CSS помогите реализовать подобное.

 

[javx]

Костыль жесткий, но может тебе поможет в дальнейшем ковырянии.

 

[sol_los]

Должно быть так

.tab-grid, .product-grid .block {
    display: inline-block;
    position: relative;
    width: 199px;
    padding: 10px;
    text-align: center;
    float: left;
    vertical-align: top;
}

.ico_index {
    height: 376px;
    display: block;
    overflow: hidden;
    margin: 0px 4px 8px 4px;
    background-color: #fff;
    vertical-align: top;
    -webkit-border-radius: 4px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #ddd;
    transition-delay: 0;
    transition-duration: 0.2s; 
     transition-property: all; 
     transition-timing-function: cubic-bezier(0, 0, 1, 1); 
}

.product-grid .block:hover .ico_index{
    position: absolute;
    height: auto;
    z-index: 100;
    overflow: visible;
}

родитель позиционирует элемент что бы не убежал из сетки, а внутри с элементом уже делаем что хотим

 

[funnywheel]

Для просмотра ссылки Войди или Зарегистрируйся

 

[SuperRomario]

Костыль жесткий, но может тебе поможет в дальнейшем ковырянии.

Костыль может быть и жесткий, но мне помог. По крайней мере сейчас работает так как хочет заказчик.

Спасибо всем за помощь.

Для просмотра ссылки Войди или Зарегистрируйся

Это я так понимаю более правильный вариант? По-позже постараюсь и в нем разобраться.