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,
});
});
});
.descriptions__content {
display: flex;
justify-content: space-around;
}
@media (max-width: 1424px) {
.descriptions__content .descriptions__content {
flex-direction: column;
}
}