Как изменить размеры flex-элемента без изменения положения соседних блоков?

Question

[SlavaSlavik]

Друзья, всех приветствую!

Застрял на такой задаче: нужно сверстать сетку с карточками товаров. При наведении на один из товаров (.item:hover), один из его дочерних элементов становится видимым, и, соответственно, высота .item увеличивается. Но при этом новый, увеличенный item должен перекрывать соседние, влиять на их положение он не должен.

<div class="container">

		<div class="item">
			<div class="visible-block">
				Какой-то контент, который виден по умолчанию
			</div>
			<div class="hidden-block">
				Контент, который появляется при наведении мыши на item
			</div>
		</div>

		<div class="item">
			<div class="visible-block">
				Какой-то контент, который виден по умолчанию
			</div>
			<div class="hidden-block">
				Контент, который появляется при наведении мыши на item
			</div>
		</div>

		<div class="item">
			<div class="visible-block">
				Какой-то контент, который виден по умолчанию
			</div>
			<div class="hidden-block">
				Контент, который появляется при наведении мыши на item
			</div>
		</div>

		<div class="item">
			<div class="visible-block">
				Какой-то контент, который виден по умолчанию
			</div>
			<div class="hidden-block">
				Контент, который появляется при наведении мыши на item
			</div>
		</div>

		<div class="item">
			<div class="visible-block">
				Какой-то контент, который виден по умолчанию
			</div>
			<div class="hidden-block">
				Контент, который появляется при наведении мыши на item
			</div>
		</div>
		
	</div>

.container {
    max-width: 800px;
    padding: 10px;
    margin: 0 auto;
    border: 2px solid #000;
    box-sizing: border-box;

    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 25px;
}

.item {
    border: 1px solid red;
    text-align: center;
    flex: 0 1 240px;
    box-sizing: border-box;
}

.item div {
    padding: 20px;
}

.hidden-block {
    display: none;
}

.item:hover {box-shadow: 0 0 10px rgba(0,0,0,0.5);}

.item:hover .hidden-block {
    display: block;
}

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

Пример: отображение товаров на wb, прикрепляю скриншот (на третий товар в первом ряду наведен курсор, и его содержимое накладывается на соседние элементы):


Пробовал добавлять внутрь .item дополнительный див .wrapper. Item'у добавлял position: relative, а wrapper'у absolute. Но т.к. relative ориентируется на исходные размеры элемента, не получается добавить тень и т.д.

В голову приходит только изменение размеров при помощи JS, но почему-то мне кажется, что должен быть более простой способ :) Может кто-нибудь подскажет, как реализовать? Буду очень благодарен.

Comments

[szQocks]

плохо пробовал через absolute

[Ankhena]

не получается добавить тень и т.д.

Отсюда вывод: не тому тень.

Пример: отображение товаров на wb

В голову приходит только изменение размеров при помощи JS

Да, на WB так и сделано.
Только размер как раз таки меняться не должен ;) Это содержимое должно вывалиться.

[SlavaSlavik]

Ankhena, жалко, что нет здесь смайлика с рукой и лицом.. Как я сам не додумался тень врапперу добавить, не понимаю)) Спасибо за ответ!

[SlavaSlavik]

szQocks, как говорится, спасибо за конструктивный ответ)

Answer 1

[Alexander Bashkin]

https://codepen.io/rainbrew/pen/OJaqEOy

<div class="container">
   <div class="item">
      <div class="item-wrapper">
         <div class="visible-block">
            Какой-то контент, который виден по умолчанию
         </div>
         <div class="hidden-block">
            Контент, который появляется при наведении мыши на item
         </div>
      </div>
   </div>
   <div class="item">
      <div class="item-wrapper">
         <div class="visible-block">
            Какой-то контент, который виден по умолчанию
         </div>
         <div class="hidden-block">
            Контент, который появляется при наведении мыши на item
         </div>
      </div>
   </div>
   <div class="item">
      <div class="item-wrapper">
         <div class="visible-block">
            Какой-то контент, который виден по умолчанию
         </div>
         <div class="hidden-block">
            Контент, который появляется при наведении мыши на item
         </div>
      </div>
   </div>
   <div class="item">
      <div class="item-wrapper">
         <div class="visible-block">
            Какой-то контент, который виден по умолчанию
         </div>
         <div class="hidden-block">
            Контент, который появляется при наведении мыши на item
         </div>
      </div>
   </div>
   <div class="item">
      <div class="item-wrapper">
         <div class="visible-block">
            Какой-то контент, который виден по умолчанию
         </div>
         <div class="hidden-block">
            Контент, который появляется при наведении мыши на item
         </div>
      </div>
   </div>
</div>

.container {
     max-width: 800px;
     padding: 10px;
     margin: 0 auto;
     border: 2px solid #000;
     box-sizing: border-box;
     display: flex;
     justify-content: flex-start;
     align-items: stretch;
     flex-wrap: wrap;
     gap: 25px;
}
 .item {
     text-align: center;
     flex: 0 1 240px;
     box-sizing: border-box;
     position: relative;
}
 .item .item-wrapper {
     border: 1px solid red;
     background: #fff;
}
 .item:hover .item-wrapper {
     position: absolute;
     top: 0;
     left: 0;
     box-shadow: 0 0 10px rgba(0,0,0,0.5);
     min-height: 100px;
     z-index: 2;
}
 .item:hover .hidden-block {
     display: block;
     padding: 0 20px 20px 20px;
}
 .item .visible-block {
     padding: 20px;
}
 .hidden-block {
     display: none;
}

Comments

[SlavaSlavik]

Огромное спасибо! За рабочее решение и за то, что потратили свое время