Увеличение высоты div вверх при ховере

Question

Есть набор карточек, которые находятся во флекс-контейнере и по наведению курсора на любую из карточек, она должна увеличиться в высоте вверх чтобы в заголовке карточки появилось место для текста (на картинке цифра 6). Проблема в том, что у карточек динамичные размеры и расположение в зависимости от содержимого (квадратики).

На скриншоте показано как реализовано сейчас, при наведении на пятую карточку, у нее появляется дополнительный блок с текстом "6" и она расширяется вниз. Не могу добиться нужного поведения с абсолютным позиционированием.

const container = styled('div', {
  display: 'flex',
  gap: '4px',
  flexWrap: 'wrap',
  marginTop: '20px',
});

const card = styled('div', {
  display: 'flex',
  padding: '8px',
  flexDirection: 'column',
  gap: '4px',
  border: '1px solid $grey50',
  borderRadius: '8px',
  height: 'fit-content',
  transition: '0.2s',

  '&:hover': {
    borderColor: '$grey100',
  },
});

const row = styled('div', {
  display: 'flex',
  gap: '2px',
  flexWrap: 'wrap',
});

const block = styled('div', {
  width: '16px',
  height: '16px',
  borderRadius: '2px',
  backgroundColor: '$grey75',
});

Answer 1

Есть вариант на голом CSS где мы ставим максимальную высоту элемента в 0 и при наведении увеличиваем блок до максимально возможной высоты элемент которая может быть.

const cardItemsVariants = ['green', 'gray', 'yellow', 'red']

const columns = 8
const cardItems = 3 * 6 

const items = [...new Array(columns)].map(() => (
  [...new Array(cardItems)].map(() => (
    cardItemsVariants[Math.floor(Math.random()*cardItemsVariants.length)]
  ))
))

const containerElem = document.querySelector('.container')

for (const [index, cardItems] of items.entries()) {
  const cardElem = document.createElement('div')
  cardElem.classList.add('card')

  const textWrapperElem = document.createElement('div')
  textWrapperElem.classList.add('text')
  const textElem = document.createElement('p')
  textElem.innerText = `${index} Lorem ipsum...`
  textWrapperElem.appendChild(textElem)
  cardElem.appendChild(textWrapperElem)
  
  const cardItemsElem = document.createElement('div')
  cardItemsElem.classList.add('items')

  for (const cardItem of cardItems) {
    const cardItemElem = document.createElement('div')
    cardItemElem.classList.add('item', cardItem)
    cardItemsElem.appendChild(cardItemElem)
  }
  
  cardElem.appendChild(cardItemsElem)
  
  containerElem.appendChild(cardElem)
}

.container {
  display: flex;
  gap: 4px;
  width: 100%;
  align-items: start;
}

.card {
  flex-grow: 1;
  padding: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}

.items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.item {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 10%;
}

.green { background-color: #afe0bb; }
.gray { background-color: #e1e1e6; }
.yellow { background-color: #ffd57d; }
.red { background-color: #ffc4b0; }

.text {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s;
}

p {
  margin: 0 0 8px 0;
  padding: 0;
  font-size: 12px;
}

.card:hover .text {
  max-height: 200px;
}

<div class="container"></div>

Так как код вы не предоставили, мне пришлось накинуть рандомную генерацию блоков чтобы воспроизвести пример вашей картинки, его не нужно брать во внимание, он просто для демонстрации

Более подробные варианты растягивания высоты уже были заданы в этом вопросе: https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css

БЛОГ НА HUSL

Увеличение высоты div вверх при ховере

Ответы (1 шт):