[아임웹 코드] 마우스를 따라 파도를 타는 이미지 갤러리

시연 동영상 보기

<div class="padocontainer">
<div class="wrapper">
<div class="items">
<div class="item" tabindex="0" style="background-image: url(https://cdn.imweb.me/upload/S20220110de20c90fdecb7/19430cf288a81.jpg)"></div>
<div class="item" tabindex="0" style="background-image: url(https://cdn.imweb.me/upload/S20220110de20c90fdecb7/0aeb08264bd39.jpg)"></div>
<div class="item" tabindex="0" style="background-image: url(https://cdn.imweb.me/upload/S20220110de20c90fdecb7/d8989d526c3f3.jpg)"></div>
<div class="item" tabindex="0" style="background-image: url(https://cdn.imweb.me/upload/S20220110de20c90fdecb7/517fc6abeef6e.jpg)"></div>
<div class="item" tabindex="0" style="background-image: url(https://cdn.imweb.me/upload/S20220110de20c90fdecb7/e77f9f0c17edc.jpg)"></div>
<div class="item" tabindex="0" style="background-image: url(https://cdn.imweb.me/upload/S20220110de20c90fdecb7/e89c89546b044.jpg)"></div>
<div class="item" tabindex="0" style="background-image: url(https://cdn.imweb.me/upload/S20220110de20c90fdecb7/d434d3b0d2c20.jpg)"></div>
<div class="item" tabindex="0" style="background-image: url(https://cdn.imweb.me/upload/S20220110de20c90fdecb7/ffe192a609e79.jpg)"></div>
<div class="item" tabindex="0" style="background-image: url(https://cdn.imweb.me/upload/S20220110de20c90fdecb7/9c79654091a9e.jpg)"></div>
<div class="item" tabindex="0" style="background-image: url(https://cdn.imweb.me/upload/S20220110de20c90fdecb7/218d230c55197.jpg)"></div>
<div class="item" tabindex="0" style="background-image: url(https://cdn.imweb.me/upload/S20220110de20c90fdecb7/48240e799fbe5.jpg)"></div>
<div class="item" tabindex="0" style="background-image: url(https://cdn.imweb.me/upload/S20220110de20c90fdecb7/aac7159d4e9a3.jpg)"></div>
<div class="item" tabindex="0" style="background-image: url(https://cdn.imweb.me/upload/S20220110de20c90fdecb7/249d1fd29de75.jpg)"></div>

</div>

</div>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

:root{
--index: calc(1vw + 1vh);
--transition: cubic-bezier(.1, .7, 0, 1);
}

.padocontainer{

}

.wrapper{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}

.items{
display: flex;
gap: 0.4rem;
perspective: calc(var(--index) * 35);
}

.item{
width: calc(var(--index) * 3);
height: calc(var(--index) * 12);
background-color: #222;
background-size: cover;
background-position: center;
cursor: pointer;
filter: grayscale(1) brightness(.5);
transition: transform 1.25s var(--transition), filter 3s var(--transition), width 1.25s var(--transition);
will-change: transform, filter, rotateY, width;
}

.item::before, .item::after{
content: '';
position: absolute;
height: 100%;
width: 20px;
right: calc(var(--index) * -1);
}

.item::after{
left: calc(var(--index) * -1);
}

.items .item:hover{
filter: inherit;
transform: translateZ(calc(var(--index) * 10));
}

/*Right*/

.items .item:hover + *{
filter: inherit;
transform: translateZ(calc(var(--index) * 8.5)) rotateY(35deg);
z-index: -1;
}

.items .item:hover + * + *{
filter: inherit;
transform: translateZ(calc(var(--index) * 5.6)) rotateY(40deg);
z-index: -2;
}

.items .item:hover + * + * + *{
filter: inherit;
transform: translateZ(calc(var(--index) * 2.5)) rotateY(30deg);
z-index: -3;
}

.items .item:hover + * + * + * + *{
filter: inherit;
transform: translateZ(calc(var(--index) * .6)) rotateY(15deg);
z-index: -4;
}


/*Left*/

.items .item:has( + :hover){
filter: inherit;
transform: translateZ(calc(var(--index) * 8.5)) rotateY(-35deg);
}

.items .item:has( + * + :hover){
filter: inherit;
transform: translateZ(calc(var(--index) * 5.6)) rotateY(-40deg);
}

.items .item:has( + * + * + :hover){
filter: inherit;
transform: translateZ(calc(var(--index) * 2.5)) rotateY(-30deg);
}

.items .item:has( + * + * + * + :hover){
filter: inherit;
transform: translateZ(calc(var(--index) * .6)) rotateY(-15deg);
}

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