Блог

У меня есть контейнер div с содержимым:

     <div class="myBtn" tabindex="0">

    Line 1

    Line 2

  </div>
  

И этот CSS-код для изменения размера

 div.myBtn:focus {
  height: 100px;
  background-color: gray;
}

div.myBtn {
  height: 50px;
  background-color: gray;
  border-radius: 10px;
  width: 200px;
  outline: none;
  transition: 0.5s;
}
  

Теперь я хочу добавить, что div показывает в «маленьком режиме» только строку 1, а
в большем режиме — строку 1 и строку 2.

Я также хочу добавить, что размер изображения в div изменяется в зависимости от размера

Скрывать / показывать содержимое на основе изменения высоты — не очень хорошая идея.

Вместо этого установите отображение скрытого содержимого по умолчанию none на, а затем измените его на желаемый стиль отображения при определенных условиях.

Например:

 .line2{
    display: none;
}
.parent:hover .line2{
    display: inline;
}
  

И HTML:

 <div class="parent">
    <div class="line1">some content</div>
    <div class="line2">some more content</div>
</div>