@Taardaba

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

Здравствуйте, есть карточка со скрытым текстом, при ховере скрытый текст должен показываться, подскажите как можно сделать плавное появление текста и увеличении карточки?
Вот набросок того, как это выглядит сейчас
  • Вопрос задан
  • 277 просмотров
Пригласить эксперта
Ответы на вопрос 3
@ld161100
Вместо свойства display используй opacity
.item__hidden_text{
  opacity: 0;
  transition: .2s;
}
.item:hover .item__hidden_text{
  opacity: 1; 
}

По другому без JS вряд-ли можно сделать
Ответ написан
profesor08
@profesor08 Куратор тега CSS
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,
    });
  });
});
Ответ написан
@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{}
Ответ написан
Ваш ответ на вопрос

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

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