How to make it so that the hover effect works correctly?

Question

css

These are just pictures.
I did so

.services-item {
    width: 14%;

    &:first-child {
      transform:translateX(0);
      z-index: 0;
    }

    &:nth-child(2) {
      transform:translateX(#{$servicesize});
      z-index: 1;
    }

    &:nth-child(3) {
      transform:translateX(calc(#{$servicesize} * 2));
      z-index: 2;
    }

    &:nth-child(4) {
      transform:translateX(calc(#{$servicesize} * 3));

      z-index: 3;
    }

    &:nth-child(5) {
      transform:translateX(calc(#{$servicesize} * 4));

      z-index: 4;
    }


    &:nth-child(6) {
      transform:translateX(calc(#{#{$servicesize}} * 5));

      z-index: 5;

    }

    &:nth-child(7) {
      transform:translateX(calc(#{#{$servicesize}} * 6));

      z-index: 6;
    }

    &:hover {
      z-index: 999;
    }

I think the idea is clear, but the hover does not work very well, how can I do it correctly? Maybe there are examples or ideas?

https://codepen.io/poylar/pen/gOaVQpO

Answer 1

like this? www.nmk-mebel.ru
It's called an accordion slider