.hover-effect-wrapper {
  margin: 0 auto;
  height: 500px;
}
.hover-effect-wrapper .item {
  height: 155px;
  width: 114px;
  border: 1px solid black;
  float: left;
  margin: 10px;
  border-radius: 5px;
  background: url(playing-cards.jpg) top right;
  display: inline-block;
  filter: brightness(0);
  transition: all 1s;
  margin-bottom: 80px;
}

.item:nth-child(1) {
  background-position: 0 -3px;
}
.item:nth-child(2) {
  background-position: 488px -172px;
}
.item:nth-child(3) {
  background-position: 488px -341px;
}
.item:nth-child(4) {
  background-position: 488px -509px;
}
.item:nth-child(5) {
  background-position: 363px -668px;
}
.item:nth-child(6) {
  background-position: 363px -836px;
}
.item:nth-child(7) {
  background-position: 363px -1005px;
}
.item:nth-child(8) {
  background-position: 363px -1173px;
}

.item:hover {
  transform: scale(1.4);
  filter: brightness(1);
}

.item:hover + * {
  transform: perspective(100px) scale(1.2) rotateY(15deg) translateX(25px);
  filter: brightness(0.5);
}
.item:hover + * + * {
  transform: perspective(100px) scale(1) rotateY(5deg) translateX(10px);
  filter: brightness(0.2);
}

.item:has(+ *:hover) {
  transform: perspective(100px) scale(1.2) rotateY(-15deg) translateX(-25px);
  filter: brightness(0.7);
}

.item:has(+ * + *:hover) {
  transform: perspective(100px) scale(1) rotateY(-5deg) translateX(-10px);
  filter: brightness(0.2);
}