Cooler Card Hover Effekt mit HTML und CSS erstellen

Wenn man eine neue Webseite designt ist man immer auf der Suche nach coolen Ideen und heute möchte ich euch eine zeigen. Ich habe hier nämlich eine Idee wie ihr Cards designen und positionieren und animieren könnt. Ich habe das schon mehrmals auf Webseite gesehen wo wichtige Infos gezeigt werden wollen oder um die letzten Blogbeiträge besonders hervor zu heben.

Ich find es der Hammer

Video

HTML

<div class="container">
      <div class="card">
        <h1>titel</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Necessitatibus illo commodi autem excepturi.
        </p>
      </div>
      <div class="card">
        <h1>titel</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Necessitatibus illo commodi autem excepturi.
        </p>
      </div>
      <div class="card">
        <h1>titel</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Necessitatibus illo commodi autem excepturi.
        </p>
      </div>
      <div class="card">
        <h1>titel</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Necessitatibus illo commodi autem excepturi.
        </p>
      </div>
      <div class="card">
        <h1>titel</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Necessitatibus illo commodi autem excepturi.
        </p>
      </div>
    </div>

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: var(--bg);

  position: relative;
  left: 150px;
}

.container {
  display: flex;
  gap: 10px;
}

.card {
  width: 240px;
  height: 320px;
  background: var(--card);
  border-radius: 5px;
  box-shadow: rgba(10, 10, 10, 0.5) 0 10px 20px;
  transition: 300ms ease-in-out;
  padding: 20px;
}

.card + .card {
  margin-left: -10%;
}

.card:hover {
  transform: rotate(-5deg);
  /*scale: 2;*/
}

.card:hover ~ .card {
  z-index: 1;
  translate: 80px;
}