Почему не работает css эффект?

Question

[n1ksON]

Вот нашёл css эффект - https://codepen.io/cassidoo/pen/RZOWQb
Вот мой код - https://jsfiddle.net/niks_on/kvdep1s3/
Эффект не работает. Как я понял вся проблема в z-index. Я пробовал разные варианты, к примеру, заменил background на border, но эффект становится совсем другим по виду.
Подскажите, пожалуйста, в чём ошибка.

Answer 1

[Ivan Sedov]

Проблема в том, что вы используете background-color: rgba(233, 85, 49, 0.1);
Нужно было заменить rgba на hex
https://jsfiddle.net/3vceq47k/

Comments

[n1ksON]

Капец, даже и подумать не мог, что проблема может быть в написании цветов разного формата :D
Спасибо :)

[n1ksON]

В итоге не помогло. Вставляю в песочницу код - работает, к себе - нет.

[Rustam Bainazarov]

n1ksON, а кто должен понять, почему? Смотрите инструменты разработчика, выясняйте, что и где перебивает стили на боевом сайте.

[n1ksON]

Рустам Байназаров, так я и не обвиняю никого) пытаюсь разобраться, но заливаю весь html код и весь css код в песочницу - всё окей, у меня не работает. Начинаю думать, что как-то js мешает.. вообщем как-то это всё подозрительно

[Ivan Sedov]

n1ksON, Ещё проверь как вы пишите псевдоэлементы, в песочнице у вас пробелы стоят между :hover ::before и с after аналогичная ситуация