CSS でスムーズなカード グループを作成する方法

<div class="card-group">
  <div class="card">
    <img src="image1.jpg" alt="Image 1">
    <div class="card-content">
      <h3>Card Title 1</h3>
      <p>This is a description for card 1.</p>
    </div>
  </div>

  <div class="card">
    <img src="image2.jpg" alt="Image 2">
    <div class="card-content">
      <h3>Card Title 2</h3>
      <p>This is a description for card 2.</p>
    </div>
  </div>

  <!-- Add more cards as needed -->
</div>

.card-group {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.card img {
  width: 100%;
  height: auto;
}

.card-content {
  padding: 15px;
}

document.querySelectorAll('.card').forEach(card => {
  card.addEventListener('click', () => {
    card.classList.toggle('expanded');
    // Additional JavaScript functionalities can be added here
  });
});

.card.expanded {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}