Me temo que no vas a poder hacer lo que buscas, si no haces alguna cosilla extra para sortear el problema.
¿¿Sabes lo que pasa?? Cuando defines un elemento con overflow hidden estás afectando a ese elemento completo independientemente de las definiciones de overflow que pongas en los hijos. Es decir dado que tu sección principal tiene un overflow hidden todo lo que pongas dentro heredará ese comportamiento. En este caso no se puede redefinir porque los hijos tengan un overflow visible o nada parecido. Si lo piensas tiene sentido porque si defines que se deben ocultar las cosas el elemento debe ocultar todo lo que tenga dentro.
¿Qué se puede hacer para permitir que desborden los contenidos de tu <span class="overlay"></span>?
Usar otro overflow en el contenedor padre, abuelo... (ancestro)
La solución que te sugiero sería cambiar el comportamiento overflow hidden en el contenedor padre. Debes asegurarte de que todos los elementos contenedores en la jerarquía hasta el <span> no tengan la propiedad overflow: hidden;. Esto incluye <section>, cualquier posible <div> o <span> que sea padre del elemento que quieres que desborde.
En este caso sería cambiar el siguiente código:
section, section .content, .content span {
overflow: visible;
}
Colocar el elemento que desborda fuera de esta jerarquía
La otra solución que se me ocurre es que pongas el elemento que debe desbordar fuera de la jerarquía que tiene el overflow a hidden. Así no estaría afectado por esa configuración.
Me refiero al elemento
<span class="overlay"></span>
Al fin y al cabo como es un elemento en superposición teóricamente lo puedes colocar en cualquier parte de tu código HTML y funcionará del mismo modo. quizás la parte complicada sea el posicionamiento de ese overlay para que aparezca en la posición que necesitas, pero esto ya sería un problema salvable mediante JavaScript.
Para solucionar ese problema necesitarías buscar un elemento de anclaje, mediante javascript obtienes la posición de ese elemento y luego colocas el overlay en el lugar adecuado según el elemento de anclaje que has analizado. El problema de esta solución es que te enfrentarás a otras dificultades cuando se realice scroll en la página o bien se redimensiona la ventana del navegador, pues el componente de anclaje podría cambiar la posición y tú deberías mediante javascript reaccionar a esos cambios moviendo el overlay a las posiciones nuevas. Es una dificultad pero no es insalvable como si lo era el overflow Hidden en el padre.