Переход непрозрачности при триггере цвета фона :: after с помощью: hover :: after не работает? - PullRequest
Новая
       121

Переход непрозрачности при триггере цвета фона :: after с помощью: hover :: after не работает?

0 голосов
/ 20 июня 2020

Я тестирую несколько способов получить переход непрозрачности в триггере цвета фона :: after с помощью: hover :: after, и он не работает. Я беру здесь рабочие примеры, но пока безуспешно.

У меня есть цвет при наведении, но нет перехода?

Я хочу создать цветное прозрачное наложение поверх фонового изображения в :: before element ...

Это полный код элемента 

#takuma-products {
    position: relative;
    overflow: hidden;
}   
#takuma-products::before{
    background: url(../../../images/menu/depart-home/section-takuma-products-services/fp-takuma-efoil-white-close-up.jpg) center center no-repeat;
    content: "";
    position: absolute;
     width: 200%;
    height: 200%;
    z-index: -1;
    transform: skew(10deg);
}

#takuma-products::after{
background-color: red;
    content: "";
    position: absolute;
     width: 200%;
    height: 200%;
    z-index: -1;
    transform: skew(10deg);
    -webkit-transition: background-color 2s ease-out;
    -moz-transition: background-color 2s ease-out;
    -o-transition: background-color 2s ease-out;
    transition: background-color 2s ease-out;
    opacity: 0;
}
#takuma-products:hover::after{
background-color: red;
    content: "";
    position: absolute;
     width: 200%;
    height: 200%;
    z-index: -1;
    transform: skew(10deg);
    opacity: 0.5;
}
...