item:has(+ * + * + * + :hover), items .item:hover + * + * + *

 

* {margin: 0;padding: 0;box-sizing: border-box; } 
:root {--index: calc(1vw + 1vh);--transition: cubic-bezier(.1, .7, 0, 1); } 
body {background-color: #141414; } 
.wrapper {display: flex;align-items: center;justify-content: center;height: 100vh; } 
.items {display: flex;gap: .4rem;perspective: calc(var(--index) * 35); } 
.item {width: calc(var(--index) * 3);height: calc(var(--index) * 12);background-color: #222;background-position: center;background-size: cover;transition: transform 1.25s var(--transition), filter 3s var(--transition), width 1.25s var(--transition);cursor: pointer;will-change: transform, filter;filter: grayscale() brightness(.5); } 
.item::before, .item::after {position: absolute;right: calc(var(--index) * -1);width: 20px;height: 100%;content: ''; } 
.item::after {left: calc(var(--index) * -1); } 
.items .item:hover {transform: translateZ(calc(var(--index) * 10));filter: inherit; } 

/* Right */
.items .item:hover + * {z-index: -1;transform: translateZ(calc(var(--index) * 8.5)) rotateY(35deg);filter: inherit; } 
.items .item:hover + * + * {z-index: -2;transform: translateZ(calc(var(--index) * 5.6)) rotateY(40deg);filter: inherit; } 
.items .item:hover + * + * + * {z-index: -3;transform: translateZ(calc(var(--index) * 2.4)) rotateY(30deg);filter: inherit; } 
.items .item:hover + * + * + * + * {z-index: -4;transform: translateZ(calc(var(--index) * .6)) rotateY(14deg);filter: inherit; } 

/* Left */
.item:has(+ :hover) {transform: translateZ(calc(var(--index) * 8.5)) rotateY(-35deg);filter: inherit; } 
.item:has(+ * + :hover) {transform: translateZ(calc(var(--index) * 5.6)) rotateY(-40deg);filter: inherit; } 
.item:has(+ * + * + :hover) {transform: translateZ(calc(var(--index) * 2.4)) rotateY(-30deg);filter: inherit; } 
.item:has(+ * + * + * + :hover) {transform: translateZ(calc(var(--index) * .6)) rotateY(-14deg);filter: inherit; } 

.items .item:active, .items .item:focus {margin: 0 .45vw;z-index: 100;width: 28vw;transform: translateZ(calc(var(--index) * 10));filter: inherit; }

<div class="wrapper">
    <div class="items">
        <div class="item" tabindex="1" style="background-image: url(img/photos/1.jpg)"></div>
        <div class="item" tabindex="1" style="background-image: url(img/photos/2.jpg)"></div>
        ...
    </div>