body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-image: url(bground.jpg);
    background-size: cover;
}
.list {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25px 30px;
}
.item {
    margin: 0 3px; /* Adjust as needed for spacing between items */
}
img {
    max-width: 100%;
    height: auto;
}
.list{
    transform-style: preserve-3d;
    transform: perspective(1000px);
}
.list .item{
    transition: .5s;
    filter: brightness(0);
}
.list .item:hover{
    filter: brightness(1);
    transform: translateZ(200px);
}
.list .item:hover + *{
    filter: brightness(0.6);
    transform: translateZ(150px) rotateY(40deg);
}
.list .item:hover + * + *{
    filter: brightness(0.4);
    transform: translateZ(70px) rotateY(20deg);
}
.list .item:hover + * + * + *{
    filter: brightness(0.2);
    transform: translateZ(30px) rotateY(10deg);
}
.list .item:has(+ *:hover){
    filter: brightness(0.6);
    transform: translateZ(150px) rotateY(-40deg);
}
.list .item:has( + * + *:hover){
    filter: brightness(0.4);
    transform: translateZ(70px) rotateY(-20deg);
}
.list .item:has( + * + * + *:hover){
    filter: brightness(0.2);
    transform: translateZ(30px) rotateY(-10deg);
}