godsplane
@godsplane

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

5ed35756f18d4973775164.png
Это просто картинки.
Я сделал так
.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
  • Вопрос задан
  • 367 просмотров
Решения вопроса 1
LenovoId
@LenovoId
у нас отменили короновирус
типа такого ? www.nmk-mebel.ru
Это называется слайдер-аккордион
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
GlassesUSA.com Тольятти
от 1 200 до 1 500 $
iSpring Йошкар-Ола
от 80 000 до 130 000 ₽
12 июл. 2020, в 19:31
2000 руб./за проект
12 июл. 2020, в 16:53
500 руб./за проект
12 июл. 2020, в 16:28
3000 руб./за проект