Как сделать плавное увеличение карточки?

Question

[Taardaba]

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

Answer 1

[Lukin Danil]

Вместо свойства display используй opacity

.item__hidden_text{
  opacity: 0;
  transition: .2s;
}
.item:hover .item__hidden_text{
  opacity: 1; 
}

По другому без JS вряд-ли можно сделать

Answer 2

[profesor08]

const items = document.querySelectorAll(".item");

items.forEach(item => {
  const hiddenText = item.querySelector(".item__hidden_text");
  
  item.addEventListener("mouseenter", () => {
    hiddenText.animate([
      {height: 0},
      {height: `${hiddenText.scrollHeight}px`}
    ], {
      fill: "forwards",
      duration: 300,
    });
  });
  
  item.addEventListener("mouseleave", () => {
    hiddenText.animate([
      {height: `${hiddenText.scrollHeight}px`},
      {height: 0}
    ], {
      fill: "forwards",
      duration: 300,
    });
  });
});

Answer 3

[Nslupko]

<div classname="wrapper">
<div classname="card"/>
<p classname="hidden-text">Hidden text</p>
</div>

.hidden-text{
 opacity: 0;
}
.wrapper:hover{
    transition: 0.2 ease;
    .card{
        transform: scale(1.2);
    }
    .hidden-text{
        opacity: 1;
    }
}

если не используешь препроцессоры вроде scss, то надо все классы внутри wrapper расписывать по цепочке вроде .wrapper:hover.card{}