* {
  margin: 0px;
  padding: 0px;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;

  height: 100vh;
  width: 100vw;
  background: linear-gradient(135deg, #fad7a1, #e96d71);

  font-family: Arial, Helvetica, sans-serif;
}

.container {
  --duration: 0.6s;
  --distance: 20%;
}

.container .item {
  position: relative;

  display: flex;
  align-items: center;

  width: 300px;

  margin: 15px 0;
  padding: 20px 10px;

  z-index: 1;

  color: var(--col);
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;

  transition: transform var(--duration) ease, color var(--duration) ease;
}

.container .item:nth-child(1) {
  --col: #e84393;
}
.container .item:nth-child(2) {
  --col: #be2edd;
}
.container .item:nth-child(3) {
  --col: #00d2d3;
}

.container .item:hover {
  color: #fff;
}

.container:hover .item:nth-child(1) {
  transform: translateX(calc(var(--distance) * -1));
}

.container:hover .item:nth-child(3) {
  transform: translateX(var(--distance));
}

.container .item::before {
  content: "";
  position: absolute;
  left: 0px;

  height: 100%;
  width: 10px;

  transition: width var(--duration) ease;

  background-color: var(--col);
  z-index: -1;
}

.container .item:hover::before {
  width: 100%;
}

.container .item .icon {
  margin: 0 20px;
  font-size: 1.5rem;
}