Перепробовал разные комбинации, сделать можно, увеличивая/уменьшая прозрачность соответственно :after и :before. Но в этом случае на время работы эффекта видна подложка. В общем в одном элементе никак не получилось. А вот если менять прозрачность и .window:after, и родителя .wrapper:after, то все гут. Параметры фоновых их изображений задаются в отдельном css имеющий data-swap="[0,1]". По умолчанию window (он лежит в css первым правилом) ни имеет изображения и прозрачен, а wrapper имеет с прозрачностью .9.
По запросу из dataset извлекается массив, затем:
rule.cssRules[array[0]].style.setProperty('background-image', 'url(image)');
rule.cssRules[array[0]].style.setProperty('opacity', .9);
rule.cssRules[array[1]].style.setProperty('opacity', 0);
css.dataset.swap = JSON.stringify(array.reverse())
