2
.block.post:hover {
    height: auto;
}

.block.post {
    max-height: 200px;
    transition: 0.5s;
}

У меня у одного высота плавно не меняется? Как это исправить?

5
  • примените свойство transition Commented 27 окт. 2017 в 14:18
  • Не помогает, видимо надо как-то особенно это сделать
    – user272078
    Commented 27 окт. 2017 в 14:19
  • дал ответ с примером Commented 27 окт. 2017 в 14:21
  • А вы уверены, что heigth: auto; будет отличаться по высоте от вашего начального значения?
    – Alex
    Commented 27 окт. 2017 в 14:23
  • Не всегда, конечно но разве есть разница?
    – user272078
    Commented 27 окт. 2017 в 14:30

1 ответ 1

6

Вот работающий сниппет. Надо ставить высоту auto сразу, overflow: hidden, и регулировать высоту блока при наведении через max-height

div {
  height: auto;
  max-height: 50px;
  overflow: hidden;
  background: red;
  transition: max-height 1.5s;
}

div:hover {
  max-height: 250px;
}
<div>text<br>text<br>text<br>text<br>text<br>text</div>

10
  • Это то понятно, но как заставить его работать с атрибутом auto? У меня блок с неизвестной полной высотой. Т.Е при наведении он должен раскрываться по высоте содержимого.
    – user272078
    Commented 27 окт. 2017 в 14:28
  • ну и с auto мой пример работает - посмотрите Commented 27 окт. 2017 в 14:33
  • Оно не плавно происходит.. Сижу на Chrome последней версии..
    – user272078
    Commented 27 окт. 2017 в 14:35
  • Поправил вопрос.
    – user272078
    Commented 27 окт. 2017 в 14:43
  • 1
    да погодите вы. вы правите вопрос быстрее, чем я успеваю отвечать Commented 27 окт. 2017 в 14:47

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.