Transition on a psuedo element background

pseudo_bbg_transition.less

            article {
                .featured-image {
                    position: relative;
                    &:before {
                        .transition(all 0.3s ease);
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        z-index: 1;
                        content: "";
                        opacity: 0;
                        visibility: hidden;
                        background: url(../img/gradient.png) top left no-repeat;
                        background-size: cover;
                    }
                }
                
                &:hover, &:active {
                    .featured-image {
                        &:before {
                            opacity: 1;
                            visibility: visible;
                        }
                    }
                }