Карточки чуть уменьшены и приглушены; та, на которую наводят курсор, увеличивается и становится яркой. По умолчанию активна вторая.
feedback-card.<style>
.feedback-card {
transform: scale(0.95);
opacity: 0.6;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.feedback-card.active {
transform: scale(1);
opacity: 1;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
const cards = document.querySelectorAll('.feedback-card');
// Сделать вторую карточку активной по умолчанию
if (cards.length >= 2) {
cards[1].classList.add('active');
}
cards.forEach(card => {
card.addEventListener('mouseenter', () => {
cards.forEach(c => c.classList.remove('active'));
card.classList.add('active');
});
});
});
</script>Какая карточка активна по умолчанию, задаётся в JS: cards[1] — вторая.