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

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

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

5
  • примените свойство transition 27 окт 2017 в 14:18
  • Не помогает, видимо надо как-то особенно это сделать
    – user272078
    27 окт 2017 в 14:19
  • дал ответ с примером 27 окт 2017 в 14:21
  • А вы уверены, что heigth: auto; будет отличаться по высоте от вашего начального значения?
    – Alex
    27 окт 2017 в 14:23
  • Не всегда, конечно но разве есть разница?
    – user272078
    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
    27 окт 2017 в 14:28
  • ну и с auto мой пример работает - посмотрите 27 окт 2017 в 14:33
  • Оно не плавно происходит.. Сижу на Chrome последней версии..
    – user272078
    27 окт 2017 в 14:35
  • Поправил вопрос.
    – user272078
    27 окт 2017 в 14:43
  • 1
    да погодите вы. вы правите вопрос быстрее, чем я успеваю отвечать 27 окт 2017 в 14:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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