Buen día, mi problema trata sobre css, pues estoy haciendo una página web de una tienda y me he topado con un inconveniente el cual no he logrado resolver, bueno yo le he agregado una capa transparente con color negro a mis imagenes con la seudoclase ::before, bueno hasta acá todo bien, pero ahora quiero que al pasar el cursor encima el color negro transparente que ya tienen las imagenes cambie a otro color que yo le asigne.

dejo por acá la parte de las imagen

.accesorios{
    width: 300px;
    height: 230px;
    overflow: hidden;
    position: relative;
    border-radius: 5px;
    margin-left: 30px;
    margin-right: 30px;
}

.accesorios::before{
    content: '';
    position: absolute;
    background-color: rgba(0, 0, 0, 0.671);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.accesorios img{
    width: 100%;
    height: 100%;
}

.accesorios p{
    font-size: 25px;
    color: white;
    font-family: fantasy;
    position: absolute;
    top: 41%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Alguien podria ayudarme con esto? y gracias!!