Как сделать такую карточку?

Question

[koposov_v]

Как сделать подобную карточку, чтобы при ховере карточка увеличивалась и снизу выходила кнопка, а голубая часть это имя и оно может быть длинным, и если имя больше 3 строк, то тогда делать '...' и при ховере, имя увеличивалось, самое сложное, я не понимаю как сделать, чтобы при ховере, карточка знала на какую высоту ей растягиваться, чтобы влезла кнопка, пробывал брать высоту блока всей карточки и высоту блока с именем, складывал, и задавал свойство через js, но анимация не успевала воспроизводиться и карточка просто растягивалась по высоте! Ребята Прошу Вас помощь. Сроки горят, не знаю, что делать. Спасибо всем!
Т.е. Изначальные размеры это серая часть, а добавляется потом красная, как бы карточка увеличивается в высоту.

Answer 1

[kocherman]

А почему не сделать так?

.card {height: 20rem}
.card:hover{ transform: scale(3); height: 22rem; }
.card button { display: none; }
.card:hover button { display: block; }

Comments

[koposov_v]

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

[kocherman]

koposov_v, я извиняюсь, случайно нажал не туда, отправился недописанный ответ.

[koposov_v]

kocherman, Сейчас попробую ваш совет

[kocherman]

koposov_v, scale(3) - это очень много, 1.05-1.1 - будет достаточно

[koposov_v]

kocherman, да, я понимаю) сейчас опробуем

[kocherman]

koposov_v, и там где height: 20rem и height: 22rem - 2rem разницы- это высота кнопки

[kocherman]

koposov_v, а три точки при длинном тексте это в CSS:
text-overflow: ellipsis;

[koposov_v]

kocherman,
Все равно та же проблема, когда имя состоит из 3 строк, карточка не увеличивается, а имя толкает контент, и контент не влезает и скрывается за карточкой

[kocherman]

koposov_v, я просто не до конца понимаю вас

карточка знала на какую высоту ей растягиваться

что это значит?

[koposov_v]

kocherman, ну имя карточки(голубой блок) может иметь не фиксированную ширину блока, когда имя карточки состоит из 3 строк, то высота карточки должна становиться больше, потому что голубой блок на 20-25px больше, и соответственно нужно меня высоту ховера, чтобы кнопка влезла

[kocherman]

koposov_v, как должно увеличиваться имя? transform: scale() не подходит?

[kocherman]

koposov_v, очень смутно понял вашу проблему, вам надо яваскриптом посчитать количество строк в имени сайта? это сделать легко но CSS там не поможет, только JS

[koposov_v]

kocherman, я вот и думаю как

[kocherman]

я накидал для вас функцию которая определяет ширину слова или нескольких слов.
Увидеть в работе можно тут:
https://jsfiddle.net/bzL074s5/
Просто вводите текст в единственный input на странице.
Зная ширину каждого слова, можно разбить название по словам и циклом найти те места, где будет разрыв на следующих строках.
Чтобы получить точные значения шрифта (с учетом браузерных умолчаний), лучше выполнить getComputedStyle(element).font.
Вроде бы достаточно чтобы разобрались... Если что, пишите коммент. как увижу - отвечу.

[koposov_v]

kocherman, Спасибо! Большое

[kocherman]

koposov_v,

Я даже написал функцию, которая разобъет текст на строки.

function getTextSplitted(text, font, maxWidth){
  let splitted = text.split(/\s+/g);
  let rows = [];
  let curRow = splitted.shift();
  while(splitted.length){
    let nextWord = splitted.shift();
    if( getTextWidth( curRow + ' ' + nextWord, font ) <= maxWidth) {
      curRow += ' ' + nextWord;
    }
    else {
      rows.push(curRow);
      curRow = nextWord;
    }
  }
  rows.push(curRow);
  return rows;
}

Вроде написал без ошибок

[kocherman]

Вот теперь исправил - точно без ошибок!