پیشنمایش زنده
کد HTML
<div
class="flex items-center justify-center [&_svg]:size-full [&:nth-child(1)]:[&_figure]:order-3 [&:nth-child(2)]:[&_figure]:order-2 [&:nth-child(3)]:[&_figure]:order-4 [&:nth-child(4)]:[&_figure]:order-1 [&:nth-child(5)]:[&_figure]:order-5 [&_figure]:[box-shadow:#0000001f_0_1px_3px,#0000003d_0_0_1px] [&_figure]:[transition:all_.25s_ease] hover:[&_figure]:z-[50] hover:[&_figure]:size-16 [&:hover_figure:not(:hover)]:size-[38px]"
>
<figure
class="flex items-center justify-center text-2xl font-extrabold leading-none text-zinc-400 p-4 bg-white relative rounded-full object-cover border border-solid border-zinc-300 [&:where(:nth-child(4),_:nth-child(5))]:size-8 [&:where(:nth-child(4),_:nth-child(5))]:z-[3] [&:where(:nth-child(2),_:nth-child(3))]:size-11 [&:where(:nth-child(2),_:nth-child(3))]:z-[4] [&:nth-child(1)]:size-16 [&:nth-child(1)]:z-[6] [&:where(:not(:nth-child(4)))]:-ml-2 cursor-pointer"
>
1
</figure>
<figure
class="flex items-center justify-center text-2xl font-extrabold leading-none text-zinc-400 p-4 bg-white relative rounded-full object-cover border border-solid border-zinc-300 [&:where(:nth-child(4),_:nth-child(5))]:size-8 [&:where(:nth-child(4),_:nth-child(5))]:z-[3] [&:where(:nth-child(2),_:nth-child(3))]:size-11 [&:where(:nth-child(2),_:nth-child(3))]:z-[4] [&:nth-child(1)]:size-16 [&:nth-child(1)]:z-[6] [&:where(:not(:nth-child(4)))]:-ml-2 cursor-pointer"
>
2
</figure>
<figure
class="flex items-center justify-center text-2xl font-extrabold leading-none text-zinc-400 p-4 bg-white relative rounded-full object-cover border border-solid border-zinc-300 [&:where(:nth-child(4),_:nth-child(5))]:size-8 [&:where(:nth-child(4),_:nth-child(5))]:z-[3] [&:where(:nth-child(2),_:nth-child(3))]:size-11 [&:where(:nth-child(2),_:nth-child(3))]:z-[4] [&:nth-child(1)]:size-16 [&:nth-child(1)]:z-[6] [&:where(:not(:nth-child(4)))]:-ml-2 cursor-pointer"
>
3
</figure>
<figure
class="flex items-center justify-center text-2xl font-extrabold leading-none text-zinc-400 p-4 bg-white relative rounded-full object-cover border border-solid border-zinc-300 [&:where(:nth-child(4),_:nth-child(5))]:size-8 [&:where(:nth-child(4),_:nth-child(5))]:z-[3] [&:where(:nth-child(2),_:nth-child(3))]:size-11 [&:where(:nth-child(2),_:nth-child(3))]:z-[4] [&:nth-child(1)]:size-16 [&:nth-child(1)]:z-[6] [&:where(:not(:nth-child(4)))]:-ml-2 cursor-pointer"
>
4
</figure>
<figure
class="flex items-center justify-center text-2xl font-extrabold leading-none text-zinc-400 p-4 bg-white relative rounded-full object-cover border border-solid border-zinc-300 [&:where(:nth-child(4),_:nth-child(5))]:size-8 [&:where(:nth-child(4),_:nth-child(5))]:z-[3] [&:where(:nth-child(2),_:nth-child(3))]:size-11 [&:where(:nth-child(2),_:nth-child(3))]:z-[4] [&:nth-child(1)]:size-16 [&:nth-child(1)]:z-[6] [&:where(:not(:nth-child(4)))]:-ml-2 cursor-pointer"
>
5
</figure>
</div>
کد CSS
.relative{position:relative}.flex{display:flex}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-solid{border-style:solid}.border-zinc-300{--tw-border-opacity:1;border-color:rgb(212 212 216 / var(--tw-border-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.object-cover{object-fit:cover}.p-4{padding:1rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-extrabold{font-weight:800}.leading-none{line-height:1}.text-zinc-400{--tw-text-opacity:1;color:rgb(161 161 170 / var(--tw-text-opacity))}.\[\&\:hover_figure\:not\(\:hover\)\]\:size-\[38px\]:hover figure:not(:hover){width:38px;height:38px}.\[\&\:nth-child\(1\)\]\:z-\[6\]:nth-child(1){z-index:6}.\[\&\:nth-child\(1\)\]\:size-16:nth-child(1){width:4rem;height:4rem}.\[\&\:where\(\:not\(\:nth-child\(4\)\)\)\]\:-ml-2:where(:not(:nth-child(4))){margin-left:-0.5rem}.\[\&\:where\(\:nth-child\(2\)\2c _\:nth-child\(3\)\)\]\:z-\[4\]:where(:nth-child(2), :nth-child(3)){z-index:4}.\[\&\:where\(\:nth-child\(2\)\2c _\:nth-child\(3\)\)\]\:size-11:where(:nth-child(2), :nth-child(3)){width:2.75rem;height:2.75rem}.\[\&\:where\(\:nth-child\(4\)\2c _\:nth-child\(5\)\)\]\:z-\[3\]:where(:nth-child(4), :nth-child(5)){z-index:3}.\[\&\:where\(\:nth-child\(4\)\2c _\:nth-child\(5\)\)\]\:size-8:where(:nth-child(4), :nth-child(5)){width:2rem;height:2rem}.\[\&_figure\]\:\[box-shadow\:\#0000001f_0_1px_3px\2c \#0000003d_0_0_1px\] figure{box-shadow:#0000001f 0 1px 3px,#0000003d 0 0 1px}.\[\&_figure\]\:\[transition\:all_\.25s_ease\] figure{transition:all .25s ease}.hover\:\[\&_figure\]\:z-\[50\] figure:hover{z-index:50}.hover\:\[\&_figure\]\:size-16 figure:hover{width:4rem;height:4rem}.\[\&\:nth-child\(1\)\]\:\[\&_figure\]\:order-3 figure:nth-child(1){order:3}.\[\&\:nth-child\(2\)\]\:\[\&_figure\]\:order-2 figure:nth-child(2){order:2}.\[\&\:nth-child\(3\)\]\:\[\&_figure\]\:order-4 figure:nth-child(3){order:4}.\[\&\:nth-child\(4\)\]\:\[\&_figure\]\:order-1 figure:nth-child(4){order:1}.\[\&\:nth-child\(5\)\]\:\[\&_figure\]\:order-5 figure:nth-child(5){order:5}.\[\&_svg\]\:size-full svg{width:100%;height:100%}