Как затемнить левую сторону при overflow-x: scroll?

Question

[vlad123032]

Сейчас у меня так

Но мне нужно вот так

Вот якобы код градиента который нифига не работает, background: linear-gradient(90deg, #C4C4C4 94.65%, rgba(196, 196, 196, 0) 100%); - нашел в фигме в инспекторе в данном обьекте

Comments

[Виталий Першин]

А где ваш код, чтобы мы видели что он нифига не работает?

[vlad123032]

Виталий Першин, https://maslianik.website/kinoteatr/release.html - его можно проверить уменьшив страницу до мобильной и вставить

[vlad123032]

vlad123032, в консоле я имею ввиду

[vlad123032]

Виталий Першин, вот так работает с этим кодом background: linear-gradient(90deg, #C4C4C4 94.65%, rgba(196, 196, 196, 0) 100%);

Answer 1

[Иван Гришов]

Готово.

Comments

[vlad123032]

А ещё можно как-то сделать чтобы изначально не было маски но при прокрутке она появлялась?

[Иван Гришов]

Да, можно.

[vlad123032]

А как сделать если есть несколько таких элементов, и нужно как бы по порядку им добавлять класс active а не всем сразу

Answer 2

[Виталий Першин]

Учитывая что у вас неоднородный фон, градиент вам не подходит. В вашем случае подойдет маска:

.ticket__flex .ticket__item .inner__ticket {
    overflow-x: scroll;
    max-width: 1400px;
    width: 100%;
    -webkit-mask: linear-gradient( to left, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 60%, rgba(0, 0, 0, 0) 100% );
}

Пример:

Comments

[vlad123032]

А ещё можно как-то сделать чтобы изначально не было маски но при прокрутке она появлялась?