"New Job",
Considerando que você esteja usando uma biblioteca ou framework (por exemplo, React), pense o seguinte:
Você tem componentes e estados desses componentes;
No momento em que você acessa uma página, ele exibe o componente da imagem no topo da página;
E, por trás dos panos, ele atualiza todo o componente da página com os novos dados.
Esse seria o jeito mais leigo possível de te explicar como as coisas funcionam. É como um mágico que desaparece, primeiro aparece um pano na frente, enquanto, por trás, o mágico está se trocando.
Mas, para uma referência mais simples, imagine que você só tenha HTML, CSS e JS puros. A ideia é que você troque o innerHTML de um conteúdo mas, antes disso, exiba um elemento com position fixed e que preencha toda a sua tela. Quando o innerHTML terminar o que precisa fazer, você remove o elemento overlay.
Eu fiz uma versão bem gambiarra e simples utilizando, inclusive, setTimeout como referência para você entender como esse efeito pode funcionar. Lembrando que, no mundo real, não existem setTimeouts e, sim, alterações de estado que sua aplicação fica "escutando". O conceito não é complexo, mas vamos focar na transição dos efeitos. Veja aqui o exemplo: https://jsfiddle.net/pwo86qkr/1/
No caso de você precisar recarregar uma página (imagina que está num Wordpress), a página anterior pode exibir o overlay e, a página posterior já iniciar com o overlay ativo e desativá-lo no window load.
Em resumo: Existem várias maneiras de chegar nesse resultado e alguns deles dependem muito da escolha de tecnologia que você realizou mas, em suma, o efeito é super simples e pode ser gerenciado somente por JS e CSS.
Abraço!