Изменение размера элемента без сдвига соседних

[ironzorin2]

Хочу сделать так, чтобы при наведении мышки на карточку товара показывались дополнительные поля. Как это сделано на lamoda.ru

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

 

[prived]

position absolute

[ironzorin2]

И они все складываются стопкой где-то с краю экрана

[prived]

Только что, ironzorin2 сказал:

И они все складываются стопкой где-то с краю экрана

абсолютно спозиционированный элемент позиционируется относительно родителя у которого position ralative 

 

[ironzorin2]

Я пытаюсь сделать так: featered.tpl

<div class="module-slider featured owl-carousel">
  <?php foreach ($products as $product) { ?>
  <div class="product-layout">
    <div class="product-thumb transition clearfix">
      <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive" /></a></div>
      <div class="caption">

        
        <!-------------------->

        
 <script> 
$('.product-layout').hover(
function(){
$(this).find('.caption').css("display", "block"); 
},
function(){
$(this).find('.caption').css("display", "none"); 
});


</script>

Надо product-layout обернуть ещё в один div?

[prived]

ссылку на сайт

[ironzorin2]

http://iron-zorin.ru/tr/