Создайте карточку, которая содержит изображение, заголовок и описание. Карточка должна иметь тень, плавно увеличиваться при наведении и иметь отступы для аккуратного отображения содержимого.
Ожидаемое поведение:
• Изображение находится в верхней части карточки.
• Под изображением — заголовок и краткое описание.
• Карточка при наведении увеличивается и добавляет лёгкую тень.
Решение задачи🔽
<div class="card">
<img src="https://via.placeholder.com/300x200" alt="Card Image" class="card-img">
<h3 class="card-title">Заголовок карточки</h3>
<p class="card-description">Это краткое описание для карточки. Оно даёт представление о содержимом.</p>
</div>
.card {
width: 300px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.card-img {
width: 100%;
height: auto;
}
.card-title {
margin: 16px;
font-size: 1.2em;
}
.card-description {
margin: 0 16px 16px;
font-size: 0.9em;
color: #555;
}