<div class="cards">
  <div class="card">
    <h1> <a href="#0"> card title</a></h1>
    <p>Thanks to Chris Coyier</p>
  </div>
  <div class="card">
    <h1> <a target="_blank" href="https://css-tricks.com/video-screencasts/171-movable-stacked-card-row-in-css/"> movable stacked card row in css</a></h1>
    <p>Clck Article Link 👆 to read the article</p>
  </div>
  <div class="card">
    <h1> <a href="#0"> card title</a></h1>
    <p>Looks like the one on CSS-tricks</p>
  </div>
  <div class="card">
    <h1> <a href="#0"> card title</a></h1>
    <p>I learnt a lot with this</p>
  </div>
  <div class="card">
    <h1> <a href="#0"> card title</a></h1>
    <p>Thanks to Chris Coyier</p>
  </div>

</div>

* {
  font-family: "ZCOOL KuaiLe", cursive;
}

a {
  color: orange;
}
body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  background: black;
  overflow: hidden;
}

.cards {
  display: flex;
}

.card {
  background: #17141d;
  min-width: 300px;
  width: 300px;
  min-height: 360px;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: -1rem 0 3rem #000;
  transition: 0.3s;
  --distance: -130px;
  color: white;
}
.card:not(:first-child) {
  margin-left: var(--distance);
}

.card:hover,
.card:focus-within {
  transform: translateY(-1rem);
}

.card:hover ~ .card,
.card:focus-within ~ .card {
  transform: translateX(calc(var(--distance) * -1));
}