@koposov_v

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

Как сделать подобную карточку, чтобы при ховере карточка увеличивалась и снизу выходила кнопка, а голубая часть это имя и оно может быть длинным, и если имя больше 3 строк, то тогда делать '...' и при ховере, имя увеличивалось, самое сложное, я не понимаю как сделать, чтобы при ховере, карточка знала на какую высоту ей растягиваться, чтобы влезла кнопка, пробывал брать высоту блока всей карточки и высоту блока с именем, складывал, и задавал свойство через js, но анимация не успевала воспроизводиться и карточка просто растягивалась по высоте! Ребята Прошу Вас помощь. Сроки горят, не знаю, что делать. Спасибо всем!
Т.е. Изначальные размеры это серая часть, а добавляется потом красная, как бы карточка увеличивается в высоту.
5f5e8222df21e752468900.png
  • Вопрос задан
  • 229 просмотров
Решения вопроса 1
kocherman
@kocherman
А почему не сделать так?
.card {height: 20rem}
.card:hover{ transform: scale(3); height: 22rem; }
.card button { display: none; }
.card:hover button { display: block; }
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы