Como aplicar uma opacidade sem afetar um elemento filho com html / css?

Eu quero conseguir isso usando html e css:

Eu tentei definir a opacidade do contêiner para 0.3 e a caixa para 1, mas isso não funciona: ambos os divs têm 0.3 opacidade.

jsFiddle da minha tentativa aqui

O efeito que estou tentando conseguir é uma caixa pop-up que vem no topo da página. É destacado pelo desvanecimento do conteúdo abaixo (diminuindo a opacidade).

questionAnswers(8)

yourAnswerToTheQuestion