<div class="slider">
<img src="https://bdit-community-public.s3.us-west-002.backblazeb2.com/original/2X/9/91aa893e8dd7ed09fcfaffe681216a0aad38ab6c.jpeg" alt="image title">
<img src="https://bdit-community-public.s3.us-west-002.backblazeb2.com/original/2X/b/bcd6c5262939282e76cfb650048f384b9b6e9ba0.jpeg" alt="image title">
<img src="https://bdit-community-public.s3.us-west-002.backblazeb2.com/original/2X/9/9c229baf3c301d3c2b6470a943f35ad5737687dc.jpeg" alt="image title">
<img src="https://bdit-community-public.s3.us-west-002.backblazeb2.com/original/2X/b/b19d91a86dd9a28de7c6de8b912558838d3f4fd3.jpeg" alt="image title">
<img src="https://bdit-community-public.s3.us-west-002.backblazeb2.com/original/2X/9/91aa893e8dd7ed09fcfaffe681216a0aad38ab6c.jpeg" alt="image title">
<img src="https://bdit-community-public.s3.us-west-002.backblazeb2.com/original/2X/b/bcd6c5262939282e76cfb650048f384b9b6e9ba0.jpeg" alt="image title">
<img src="https://bdit-community-public.s3.us-west-002.backblazeb2.com/original/2X/9/9c229baf3c301d3c2b6470a943f35ad5737687dc.jpeg" alt="image title">
<img src="https://bdit-community-public.s3.us-west-002.backblazeb2.com/original/2X/b/b19d91a86dd9a28de7c6de8b912558838d3f4fd3.jpeg" alt="image title">
<img src="https://bdit-community-public.s3.us-west-002.backblazeb2.com/original/2X/9/91aa893e8dd7ed09fcfaffe681216a0aad38ab6c.jpeg" alt="image title">
<img src="https://bdit-community-public.s3.us-west-002.backblazeb2.com/original/2X/b/bcd6c5262939282e76cfb650048f384b9b6e9ba0.jpeg" alt="image title">
<img src="https://bdit-community-public.s3.us-west-002.backblazeb2.com/original/2X/9/9c229baf3c301d3c2b6470a943f35ad5737687dc.jpeg" alt="image title">
<img src="https://bdit-community-public.s3.us-west-002.backblazeb2.com/original/2X/b/b19d91a86dd9a28de7c6de8b912558838d3f4fd3.jpeg" alt="image title">
</div>
html,
body {
height: 100%;
}
body {
background: #000;
display: grid;
place-content: center;
}
.slider {
display: flex;
column-gap: 20px;
}
.slider {
transform-style: preserve-3d;
transform: perspective(1200px);
}
.slider img {
width: 100px;
height: 220px;
border-radius: 16px;
object-fit: cover;
filter: grayscale(1);
transition: all 0.5s;
}
.slider img:hover {
filter: grayscale(0);
transform: translateZ(200px);
}
.slider img:hover + * {
filter: grayscale(0.2);
transform: translateZ(150px) rotatey(30deg);
}
.slider img:hover + * + * {
filter: grayscale(0.4);
transform: translateZ(70px) rotatey(18deg);
}
.slider img:hover + * + * + * {
filter: grayscale(0.6);
transform: translateZ(30px) rotatey(10deg);
}
.slider img:has(+ *:hover) {
filter: grayscale(0.2);
transform: translateZ(150px) rotatey(-30deg);
}
.slider img:has(+ * + *:hover) {
filter: grayscale(0.4);
transform: translateZ(70px) rotatey(-18deg);
}
.slider img:has(+ * + * + *:hover) {
filter: grayscale(0.6);
transform: translateZ(30px) rotatey(-10deg);
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.