Как сделать так, чтобы блоки не ехали?

Question

[ravlex]

Есть скрытый контент, который появляется в блоке при ховере на родителя. Так же есть некоторый padding который тоже появляется при наведении. Вследствие чего, сдвигаются другие блоки. Как сделать так, чтобы они не уезжали? Скрин ниже.

.content .hides {
	display: none;
}
.hides {
	position: relative;
}
.hides .fa-shopping-basket {
	background-color: #f15927;
	padding: 5px 10px;
	border-radius: 3px;
	color: #fff;
	margin-left: 23px;
	font-size: 15px;
}
.itempos {
	margin-top: 20px;
	margin-bottom: 40px;
}
.hides:hover {
	display: block;
}
.itempos:hover .hides {
display: block;
}
.itempos:hover {
	border: 3px solid blue;
	padding-left: 0;
	padding-right: 0;
}
.itempos:hover .itemcont {
	padding: 15px;
}

<div class="col-md-2 itempos">
  <div class="itemcont">
    <div class="image">
      <img class="img-responsive" src="img/pos1.png" alt="">
    </div>
    <a href="" class="name">Диск сцепления ClutchNet (6-ти лепестковая металлокерамика с демпфером)</a>
    <a href="" class="category">Трансмиссия </a>
    <div class="price">8 600 руб. <span>9900 руб.</span>
    </div>
    <div class="hides">
      <a class="podr" href="">Подробнее</a>
      <a class="crt" href=""><i class="fa fa-shopping-basket fa-1x" aria-hidden="true"></i></a>
    </div>
  </div>
</div>

Comments

[Александр Карпов]

Дайте ссылку или на https://jsfiddle.net/ воспроизведите проблему

[ravlex]

Александр Карпов: ravlex.pluton-host.ru/polar

[Александр Карпов]

ravlex: Используйте блоки с неизменяемыми размерами при наведении а внутри них используйте врапер с абсолютным позиционированием. Это вам позволит масштабировать дочерний блок не меняя размеров родительского и верстка ехать не будет. Понимаете?

[ravlex]

Александр Карпов: Это понятно, тогда ехать не будет... но в таком случае не получится сделать эффект увеличения объекта при наведении. Сейчас это сделано с помощью отступов, которые я убираю у col-md-2. Если делать абсолютно, не знаю, как поступить..

[Александр Карпов]

ravlex: Всё возможно. Увеличивать можно как захотите объект, который абсолютно спозиционирован.

[Александр Карпов]

Нужно изменить подход.

Answer 1

[Сергей ZSA]

Посмотрите как это реализовано к примеру вот на этом сайте: 101tea.ru/catalog/belyy

Answer 2

[Максим]

в смысле вы сжимаете экран а потом ваши блоки начинают выпадать ?

Comments

[ravlex]

нет, при наведении на col-md-2 у меня снизу появляется ещё блок и добавляется padding, после чего нижние смещаются вниз (как на скрине).

Answer 3

[Евгений Соломеин]

достаточно всего лишь добавить:

.itempos:hover .itemcont {
    position: absolute;
    z-index: 5;
    background: #fff;
}

а у последнего элемента в столбце, в данном случае .itempos:nth-child(7n-1) .itemcon сделать position: relative

для планшета и мобильных сделать соответствующие nth-child

Comments

[Евгений Соломеин]

Глянул сегодня) вариант, который вы сделайте сейчас не пройдет проверку переполнением. Увеличте количество текста на пару строчек, или для большей наглядности в два раза и у вас все снова поедет