Как это сверстать чтобы эффект наведения работал корректно?

Question

[godsplane]

Это просто картинки.
Я сделал так

.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;
    }

Думаю идея понятно, но наведение не очень работает, как вообще это правильно сделать?Может есть примеры или идеи?

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

Comments

[RAX7]

песочницу сделай на codepen, а то не понятно в чем проблема

[godsplane]

RAX7, https://codepen.io/poylar/pen/gOaVQpO
Проблема в эффекте наведения. он работает ужасно, думаю понятно почему.
Я хочу узнатьк ак правильно такое делать, потому что мой вариант не выглядит таким.

[RAX7]

он работает ужасно, думаю понятно почему.

Потому что сам эффект какашка. ¯\_(ツ)_/¯

Я хочу узнатьк ак правильно такое делать

В ответах Максим Ленский предложил нормальный вариант похожего эффекта
В svg есть разные варианты ховера https://developer.mozilla.org/ru/docs/Web/CSS/poin... Это упростит работу с не прямоугольными блоками, но сильно лучше от этого не станет

Answer 1

[Максим]

типа такого ? www.nmk-mebel.ru
Это называется слайдер-аккордион

Comments

[godsplane]

Не совсем, тут картинки не разъезжаются, а просто вылазят поверх остальных.
На примере квадратных блоков это просто, суть в том что тут все наклонено + все блоки в DOM прямоугольной формы и где-то часть одного блока будет залезать на другой, короче нужен идельный вариант,м ожно даже с js

[Максим]

godsplane, https://nisnom.com/podborka-razlichnyh-akkordeonov... самый первый смотрите

[godsplane]

Максим Ленский, это опять же горизонатльный пример, с этим проблем нет

[Максим]

godsplane, вы хоть один пример покажите что требуется - сделать не проблема

[godsplane]

Максим Ленский, если бы я нашел пример, то я бы сам сделал по этому примеру)
Я привел выше песочницу, поводите курсором по картинка. Согласитесь , что не очень удобно и понятно как это работает.

[Lord_Dantes]

Максим Ленский, скорей всего ТС хочет плавную смену z-index-а относительно других карточек

[Максим]

s l a v e, наверно

[Lord_Dantes]

godsplane, попробуй присмотреться к этому варианту, https://jsfiddle.net/n5zz9fLj/2/

[godsplane]

s l a v e, Нет, я хочу чтобы эффект наведения пиксель в пиксель совпадал с само карточкой, я так понимаю это не реально

[Lord_Dantes]

godsplane, сейчас даже я не понял о каком эффекте речь

[godsplane]

s l a v e, я уже сам не знаю как объяснить.
Просто спрошу ваше мнение как бы вы это сверстали и какй эффект вы бы применили здесь, если все что есть это скриншот.

[Lord_Dantes]

godsplane, я бы отодвинул карточку вбок влево и может быть остальные затемнил. По-моему сдвинуть вбок влево без абсолюта с анимацией и с абсолютом вполне возможно если найди подход. Сдвинул бы свойством transform: translateX()

[Максим]

godsplane, https://codepen.io/topicstarter/pen/OJyKrrw - давай по ходу выяснять так или нет ?

[godsplane]

Максим Ленский, и нет и да, я понял что наод было как вы сделали, в итотге я сделаю так. Спасибо