Pensando pensando, he llegado a una posible solución aquí os la dejo, por si a alguien le interesa
Como punto negativo es que si entras y sales del div muchas veces seguidas antes de terminar la transición hace el efecto tantas veces como entras y salgas
He utilizado jQuery
$("#divByN").hover(function(){
$(this).fadeOut();
})
$("#divColor").mouseleave(function(){
$('#divByN').fadeIn();
})
<div id="divColor">
<div id="divByN">
</div>
</div>
El estilo del css, divColor y divByN, tienen que tener el mismo ancho y alto. Y la misma imagen de fondo, una en color y la otra en ByN.